Button Atoms
Button components for the Fondation Botnar Dashboard design system
4
Button Types
3
Sizes
6
States
100%
Accessible
Components
Primary Buttons
Complete button component library with variants, states, and accessibility features
Features
4 variants
3 sizes
6 states
Icons support
WCAG AA
Button Hierarchy
| Type | Usage | Priority | Example |
|---|---|---|---|
| Primary | Main call-to-action, form submissions | High | Submit Application, Save Changes |
| Secondary | Alternative actions, cancel operations | Medium | Cancel, Export Data |
| Ghost | Tertiary actions, navigation | Low | Learn More, Settings |
| Danger | Destructive actions, deletion | Critical | Delete Grant, Reject |
Implementation Guidelines
Best Practices
- • Use one primary button per page/form
- • Maintain consistent button hierarchy
- • Include loading states for async actions
- • Ensure minimum 44px touch targets
- • Use descriptive button labels
- • Test with keyboard navigation
Avoid
- • Multiple primary buttons in same context
- • Using "Click here" or generic labels
- • Buttons smaller than minimum touch size
- • Missing focus states or poor contrast
- • Overusing danger buttons
- • Inconsistent button styling
Accessibility Features
WCAG Compliance
- ✓ AA contrast ratios (4.5:1)
- ✓ Minimum 44px touch targets
- ✓ Focus ring indicators
Keyboard Support
- ✓ Enter key activation
- ✓ Space key activation
- ✓ Tab navigation order
Screen Readers
- ✓ Descriptive button text
- ✓ ARIA labels for icons
- ✓ State announcements