Variants
Action hierarchy
Use one Primary action per decision region. Danger communicates consequence.
Primary
Secondary
Ghost
Danger
Sizes
Three density levels
Medium and Large meet the minimum touch-target height. Reserve Small for dense pointer-first toolbars.
Small · 36px
Medium · 44px
Large · 48px
Icons
Support the label
Decorative icons stay hidden from assistive technology. Icon-only controls require an accessible name.
Leading
Trailing
Icon only
States
Behavior is part of the contract
Keyboard focus, asynchronous work, toggle state, and unavailability remain explicit.
Loading
Toggle
Disabled
Content guidance
Start with a clear verb.
Write “Save changes,” “Add member,” or “Delete project.” Keep labels concise, specific, and on one line.
Next component: Link