Buttons
Button styles and variants for native-feeling interactions.
Button Variants
Primary
The main call-to-action button.
Secondary
For secondary actions.
Outline
Button with border and transparent background.
Ghost
Minimal button for less prominent actions.
Link
Button that looks like a link.
Soft
Subtle button with semi-transparent background.
Destructive
For dangerous or irreversible actions.
Soft Destructive
Subtle destructive button with semi-transparent background.
Button Sizes
Different sizes for different contexts.
All Variants
Sizes Reference
| Size | Class | Height | Use Case |
|---|---|---|---|
| Small | size="sm" | h-8 | Inline actions |
| Default | size="default" | h-9 | Most buttons |
| Large | size="lg" | h-10 | Hero CTAs |
| Icon | size="icon" | size-9 | Icon-only buttons |
States
- Hover - Slightly darker/lighter background
- Focus - Ring outline for accessibility
- Disabled - Reduced opacity, no pointer events
- Loading - Spinner, disabled state
Best Practices
- Clear labels - Action verbs: "Save", "Create", "Delete"
- One primary - Single primary action per context
- Consistent sizing - Same button size in related groups
- Loading states - Show progress for async actions