Buttons
Interactive elements for actions and navigation. All buttons meet WCAG 2.1 Level AA with proper focus indicators and touch targets.
Button Variants
Four main variants for different emphasis levels.
Button Sizes
Five sizes from extra small to extra large. Mobile-safe sizes (md and above) meet 44px touch target requirement.
Buttons with Icons
Icons can be positioned left, right, or used alone.
Icon-only Buttons
Compact icon buttons for toolbars and tight spaces. Always include aria-label for accessibility.
Button States
All interactive states with proper visual feedback.
Interactive States
Disabled & Loading
Success Variant
For positive actions and confirmations.
Full-width Buttons
Spans full width of container, useful for mobile layouts and forms.
Button Groups
Multiple buttons grouped together for related actions.
Horizontal Group
Vertical Group
Accessibility Guidelines
✓
Touch TargetsMinimum 44x44px for mobile (use md size and above) meet 44px touch target requirement.
✓
Color ContrastAll button variants meet WCAG AA (4.5:1 minimum).
✓
Icon-only ButtonsMust include aria-label for screen readers.
✓
Keyboard NavigationEnter/Space activates, Tab focuses next element.
✓
Disabled StateUse disabled attribute, not just styling.