Buttons
Buttons are the primary call-to-action elements. They support multiple variants, sizes, and states. All buttons follow the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standard.
♿ Accessibility: All buttons have focus states, appropriate ARIA labels, and minimum 44px height for touch targets.
Variants
Sizes
States
Full Width
HTML Usage
<button class="btn btn--primary">Click Me</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--outline">Outline</button>
<!-- Sizes -->
<button class="btn btn--primary btn--sm">Small</button>
<button class="btn btn--primary btn--lg">Large</button>
<!-- States -->
<button class="btn btn--primary" disabled>Disabled</button>
<button class="btn btn--primary btn--full">Full Width</button>
| Class | Purpose | Usage |
|---|---|---|
| .btn | Base button styles | Required on all buttons |
| .btn--primary | Primary action button | Main CTAs and actions |
| .btn--secondary | Secondary action button | Alternative actions |
| .btn--outline | Outline button | Tertiary actions |
| .btn--lg | Large button size | Prominent CTAs |
| .btn--sm | Small button size | Compact layouts |
| .btn--full | Full width button | Form submissions |