Button

Buttons allow users to trigger an action or event with a single click.

Button Variants

Default

The primary action button.

tsx

<Button>Default</Button>
<Button disabled>Disabled</Button>

Secondary

Used for secondary actions.

tsx

<Button variant="secondary">Secondary</Button>
<Button variant="secondary" disabled>Disabled</Button>

Outline

Used for less prominent actions.

tsx

<Button variant="outline">Outline</Button>
<Button variant="outline" disabled>Disabled</Button>

Destructive

Used for destructive actions like delete.

tsx

<Button variant="destructive">Destructive</Button>
<Button variant="destructive" disabled>Disabled</Button>

Button Sizes

Sizes

Buttons come in three sizes: default, sm, and lg.

tsx

<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

With Icons

Icons

Buttons can include icons to enhance meaning.

tsx

<Button>
  <Info className="mr-2 h-4 w-4" /> With Icon
</Button>
<Button variant="outline">
  <AlertTriangle className="mr-2 h-4 w-4" /> Warning
</Button>