Components / Actions
Button
stableThe primary way a user takes action. Four variants, three sizes, and a loading state.
Variants
Sizes
States
With icon
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'danger' | 'primary' | No | Visual style. |
size | 'sm' | 'md' | 'lg' | 'md' | No | Controls height and padding. |
loading | boolean | false | No | Shows a spinner and disables the button. |
icon | ReactNode | — | No | Optional leading icon, hidden while loading. |
disabled | boolean | false | No | Standard HTML disabled state. |
Do
- Use exactly one primary button per view for the main action.
- Keep labels short and verb-first — "Save changes", not "Changes will be saved."
- Use the loading state for any action that takes longer than ~300ms.
Don't
- Use more than one primary button in the same view.
- Disable a button without explaining why nearby.
- Use danger styling for anything that isn’t destructive.