Button
Buttons allow users to take actions, make choices, and trigger workflows. They represent the primary interaction points in this design system.
Button
Features
- Keyboard support with Enter and Space.
- Accessible labels and semantic button roles.
- Visual states for hover, focus, active, and disabled.
- Theme-aware styling through existing system tokens.
When to use
Accessibility
Best Practices
Use Clear Action Labels
Use verbs like 'Save', 'Send', or 'Delete' so the action is immediately understood.
Keep Visual Hierarchy
Use Primary for the main action and Ghost or Outline for secondary actions.
Show Clear States
Provide visual feedback, such as a loading state, while a process is running.
Use Comfortable Sizing
Make buttons easy to tap or click with at least a 44px hit area.
Use Ambiguous Labels
Avoid labels like 'OK' or 'Yes' that do not explain the result of the action.
Overuse Primary Actions
Do not place two Primary buttons side by side because it makes the priority unclear.
Leave Users Without Feedback
Do not let a button appear ready while the system is still processing.
Write Overlong Labels
Keep labels concise if they grow beyond two words.
Use Red Without Meaning
Reserve red for destructive actions that cannot be easily undone.
Props API
| Name | Type | Description |
|---|---|---|
| variant | 'primary' | 'secondary' | 'destructive' | 'ghost' | Sets the visual style of the button. |
| size | 'sm' | 'default' | 'lg' | Changes spacing and overall visual weight. |
| disabled | boolean | Prevents user interaction when true. |
| aria-disabled | boolean | Keeps semantic button behavior while showing disabled state. |