VOL. III · CH. 3.7 · COMPONENT
Buttons
The smallest component in the library and the one users touch more than any other.
1 min read · 141 words
3.7.1Definition & Required States
A button triggers an action. Every button needs, at minimum: default, hover, focus (keyboard-visible), active/pressed, disabled, and loading states — missing any of these is a usability defect, not a stylistic choice.
3.7.2Common Mistakes
- No visible focus state, breaking keyboard navigation silently.
- Disabled buttons with no explanation of why they're disabled or what would enable them.
- Using a link styled as a button, or a button styled as a link, misleading assistive technology about the actual behavior.
3.7.3Best Practices
- Establish a clear visual hierarchy: one primary style, one secondary, one tertiary/text style — used consistently.
- Show a loading state on any button triggering an async action, so a second click can't double-submit.
ExampleCheckout "Place Order" buttons disable and show a spinner immediately on click specifically to prevent duplicate charges from an impatient double-click.