Buttons
The button system is designed around clear visual hierarchy and predictable user interactions. Each button type serves a specific purpose in guiding users through their journey, with consistent sizing and behavior that builds confidence and reduces cognitive load.
Principles
Hierarchy & Purpose
- Primary: The most important action on a page (Save, Submit, Create Account)
- Secondary: Important but not primary actions (Cancel, Edit, View Details)
- Tertiary: Subtle actions that don't compete with primary content (Learn More, Skip)
- Toggle: State-based actions for filtering, following, or preferences
Accessibility Standards
- 44px Touch Targets: All buttons meet minimum touch target size for mobile accessibility
- High Contrast: Color combinations exceed WCAG AA contrast requirements
- Clear Focus States: Visible focus indicators for keyboard navigation
- Descriptive Text: Button labels clearly describe the action that will occur
Button Types
Primary Buttons
Used for the most important action on a page. Only one primary button should be visible at a time.
Implementation
<button className="btn-primary">
Save Changes
</button>Secondary Buttons
Used for important but not primary actions. Can appear alongside primary buttons.
Implementation
<button className="btn-secondary">
Cancel
</button>Tertiary Buttons
Used for subtle actions that shouldn't compete with primary content. No background or border.
Implementation
<button className="btn-tertiary">
Learn More
</button>Toggle Buttons
Used for state-based actions like filtering, following, or preferences. Can be grouped together.
Implementation
<div className="toggle-group">
<button className="btn-toggle active">Active</button>
<button className="btn-toggle">Inactive</button>
</div>Usage Guidelines
Best Practices
- Use only one primary button per view or modal
- Place primary actions in the bottom-right or center
- Group related actions together visually
- Use descriptive labels that clearly indicate the action
- Maintain consistent button placement across similar interfaces
Common Patterns
- Form Actions: Primary submit, secondary cancel
- Modal Dialogs: Primary confirm, secondary cancel
- Card Actions: Primary CTA, tertiary secondary actions
- Filter Groups: Toggle buttons for multiple selections