Installation

Barrel

// code example

Granular

// code example

Usage

export default function Example() {
  return <Button variant="secondary">Click me</Button>;
}

Examples

Variants

Primary

Secondary

Ghost

Destructive

Outline

Secondary Destructive

Sizes

With Icon

Icon Only

For icon-only buttons, use shape="square" or shape="circle" with the icon prop. Always include aria-label for accessibility — without visible text, screen readers need the label to convey the button's purpose.

Loading State

Disabled State

Title

Use the `title` prop to wrap the button in a tooltip. This is useful for
icon-only buttons or whenever additional context helps the user understand
the action.

Link as Button

Use LinkButton when the interaction should navigate somewhere but still look like a button. Use Button for in-place actions like submitting, opening, or toggling UI.

API Reference