Button
Buttons trigger actions or events when clicked. They are used for form submissions, navigation, and other interactive elements.
Variants
Sizes
States
With Icons
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'primary' | Visual style variant of the button |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the button |
disabled | boolean | - | Whether the button is disabled |
loading | boolean | - | Whether the button is in a loading state (shows spinner) |
asChild | boolean | - | Merge props onto immediate child (Radix Slot pattern) |
children* | React.ReactNode | - | Button content |
onClick | () => void | - | Click event handler |
Usage Guidelines
When to use
- •For primary actions on a page (use primary variant)
- •For form submissions
- •For triggering modal dialogs or other interactions
Best practices
- •Use clear, action-oriented labels (e.g., "Save", "Delete", "Continue")
- •Use primary variant for the most important action on a page
- •Use destructive variant for actions that cannot be undone
- •Show loading state during async operations
- •Disable buttons that cannot be clicked in current context
Accessibility
- •All buttons have proper focus states for keyboard navigation
- •Disabled buttons are marked with aria-disabled
- •Loading state includes aria-busy attribute
- •Button content should be descriptive of the action
Do's and Don'ts
✓ Do
- •Use clear, action-oriented labels that describe what will happen
- •Use primary variant for the main action on a page
- •Show loading state during async operations to provide feedback
- •Use destructive variant for irreversible actions like "Delete"
- •Maintain consistent button sizes within a button group
✗ Don't
- •Don't use vague labels like "Click here" or "Submit"
- •Don't use multiple primary buttons on the same page
- •Don't use buttons for navigation - use Link component instead
- •Don't mix button sizes randomly in the same context
- •Don't disable buttons without explanation (use tooltip)
Related Components
Link
For navigation between pages
Icon Button
Button with icon only, no text
Button Group
Group related buttons together