Button
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Primary#
Secondary#
Ghost#
Outline#
Destructive#
Success#
Link#
Loading…
With Icon#
Loading#
Loading…
Disabled#
Sizes#
Loading…
Variant Matrix#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | — | Icon shown to the left of the label (or replacing the spinner when `loading`). |
| trailing | ReactNode | — | Icon/text shown to the right of the label. Often a chevron, kbd hint, or arrow. |
| loading | boolean | undefined | false | When true, hides the icon, swaps in a spinner, and disables the button. |
| asChild | boolean | undefined | false | Render the inner content as a child element instead of a `<button>`. Useful for link wrappers — `<Button asChild><Link href="/" /></Button>`. |
| size | "sm" | "md" | "lg" | null | undefined | — | |
| variant | "link" | "outline" | "primary" | "secondary" | "ghost" | "destructive" | "success" | null | undefined | — | |
| fullWidth | boolean | null | undefined | — |