Component
Button
Triggers an action or navigates. Five variants — default (black), outline, ghost, muted, and destructive. Three sizes.
Variants
tsx
<Button variant="default">Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="muted">Muted</Button>
<Button variant="destructive">Destructive</Button>Sizes
tsx
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "ghost" | "muted" | "destructive" | "default" | Visual style of the button. |
| size | "sm" | "md" | "lg" | "icon" | "md" | Height and padding. |
| asChild | boolean | false | Render as child element (e.g. a Link) via Radix Slot. |
| disabled | boolean | false | Disables interaction and reduces opacity. |
| className | string | — | Additional Tailwind classes. |