A flexible button component that supports multiple visual styles and sizes.
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "outline" | "ghost" | "link" | default | Visual style variant |
| size | "default" | "sm" | "lg" | "icon" | default | Size variant |
| asChild | boolean | — | Render as a child component instead of button |
| disabled | boolean | — | Disable button interaction |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.primary | var(--primary) | Primary brand color | |
| Text | color.primary-foreground | var(--primary-foreground) | Contrasting text on primary | |
| Border Radius | borderRadius.md | var(--radius) | Medium corner rounding | |
| Padding X | spacing.4 | 1rem | Horizontal padding | |
| Padding Y | spacing.2 | 0.5rem | Vertical padding | |
| Font Size (sm) | fontSize.xs | 0.75rem | Extra small text for sm size | |
| Font Size (default) | fontSize.sm | 0.875rem | Small text for default size | |
| Font Size (lg) | fontSize.base | 1rem | Base text for lg size | |
| Font Weight | fontWeight.semibold | 600 | Semibold weight for stronger hierarchy |
Available visual styles for different contexts and emphasis levels.
<Button variant="default">Default</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button> <Button variant="link">Link</Button> <Button variant="destructive">Destructive</Button>
Button sizes for different use cases.
<Button size="sm">Small</Button> <Button size="default">Default</Button> <Button size="lg">Large</Button>
Buttons with leading or trailing icons.
<Button> <Envelope className="size-icon-md" aria-hidden="true" /> Sign in with email </Button> <Button variant="outline"> <DownloadSimple className="size-icon-md" aria-hidden="true" /> Download </Button> <Button variant="outline"> Next <CaretRight className="size-icon-md" aria-hidden="true" /> </Button>
Square buttons for icon-only actions. Always include aria-label for accessibility.
<Button size="icon" aria-label="Add item"> <Plus className="h-4 w-4" /> </Button> <Button size="icon" variant="outline" aria-label="Settings"> <Gear className="h-4 w-4" /> </Button> <Button size="icon" variant="ghost" aria-label="More options"> <Gear className="h-4 w-4" /> </Button> <Button size="icon" variant="destructive" aria-label="Delete permanently"> <Trash className="h-4 w-4" /> </Button>
Disabled state prevents interaction and reduces visual prominence.
<Button disabled>Default Disabled</Button> <Button variant="outline" disabled>Outline Disabled</Button> <Button variant="ghost" disabled>Ghost Disabled</Button> <Button variant="destructive" disabled>Destructive Disabled</Button>
Show a loading spinner while an action is in progress.
<Button disabled> <CircleNotch className="size-icon-md animate-spin" aria-hidden="true" /> Loading... </Button> <Button variant="outline" disabled> <CircleNotch className="size-icon-md animate-spin" aria-hidden="true" /> Processing </Button> <Button variant="ghost" disabled> <CircleNotch className="size-icon-md animate-spin" aria-hidden="true" /> Saving </Button>
Buttons that span the full width of their container.
<Button className="w-full">Sign In</Button> <Button variant="outline" className="w-full">Create Account</Button>
Group related buttons together with connected borders.
<div className="inline-flex rounded-md shadow-sm"> <Button variant="outline" className="rounded-r-none">Previous</Button> <Button variant="outline" className="rounded-none border-x-0">Current</Button> <Button variant="outline" className="rounded-l-none">Next</Button> </div>