UI/UX components critical
Button Design Best Practices
Button states, hierarchy, accessibility, loading states, and sizing based on WCAG 2.2, Material Design 3, Apple HIG, and Nielsen Norman Group research.
- Difficulty
- beginner
- Read time
- 1 min read
- Version
- v1.0.0
- Confidence
- established
- Last updated
Quick Reference
Use semantic <button> element, not divs. Minimum touch target 44x44px. Visible focus state with 3:1 contrast and 2px outline. One primary button per view. Show loading state for actions >2 seconds. Use :focus-visible for keyboard-only focus rings.
Use When
- Creating button components
- Designing button states (hover, focus, disabled)
- Implementing loading states
- Setting up button hierarchy in design system
- Making buttons accessible
Skip When
- Creating text links (use anchor guidelines)
- Building toggle switches or checkboxes
Button Design Best Practices
Button states, hierarchy, accessibility, loading states, and sizing based on WCAG 2.2, Material Design 3, Apple HIG, and Nielsen Norman Group research.