button-design
Installation
SKILL.md
Button Design
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 |