Button Hierarchy
Three Levels
- Primary — One per view. The main action. Filled, brand color.
- Secondary — Supporting actions. Outlined or muted fill.
- Tertiary — Least important. Text-only or ghost button.
Sizing
| Size | Height | Use Case |
|---|---|---|
| Small | 32px | Inline actions, table rows, tags |
| Medium | 40px | Default for most contexts |
| Large | 48px | Hero CTAs, primary actions, mobile |
Labels
- Use verbs. "Save," "Delete," "Create Project" not "OK," "Submit," "Yes."
- Be specific. "Add to Cart" not "Continue."
- 2-4 words. If longer, the action is too complex for a button.
- No ALL CAPS unless it's part of the brand system.
States
Every button needs: Default → Hover → Active/Pressed → Focus → Disabled → Loading
Loading State
- Replace label with spinner + "Saving..." (keep button width stable).
- Disable the button during loading.
- Never lose the user's click.
Icon Buttons
- Always include a tooltip or aria-label.
- Minimum 44x44px touch target even if icon is 20px.
- Common: close (X), menu (hamburger), more (three dots), back (arrow).