Button
Buttons trigger actions. They support multiple variants, sizes, loading states, and icons.
Variants
Four visual variants for different levels of emphasis.
Sizes
Buttons come in sm, md, and lg sizes.
States
Loading, disabled, and full-width button states.
With Icons
Buttons can include leading or trailing icons.
Interactive
Pick a variant and size to see a live preview.
Variant
Size
Loading
Disabled
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "danger" | "primary" | Visual style of the button. |
size | "sm" | "md" | "lg" | "md" | Size of the button. |
loading | boolean | false | Shows a spinner and disables interaction while loading. |
disabled | boolean | false | Prevents interaction when true. |
fullWidth | boolean | false | Stretches the button to fill its container. |
iconLeft | ReactNode | — | Icon rendered before the label. |
iconRight | ReactNode | — | Icon rendered after the label. |
children | ReactNode | — | Button label content. |
Related Components
Best Practices
✅ Do
- Use primary for the main CTA
- Use descriptive labels
- Show loading state during async operations
- Use iconLeft for actions like Save/Delete
❌ Don't
- Put multiple primary buttons next to each other
- Use vague labels like "Click Here"
- Disable without explanation
- Use ghost variant for important actions
Accessibility
| Feature | Support |
|---|---|
| Keyboard | Space/Enter to activate |
| Focus visible outline | Visible focus ring on keyboard navigation |
| aria-label | Required for icon-only buttons |
| aria-disabled | Communicated to assistive technologies |
| role="button" | Implicit on native button element |