Button
Token-aware action buttons for primary flows, secondary actions, and compact utility triggers.
API
All inputs and configuration options for zyra-button.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'primary' | Visual style |
size | 'sm' | 'md' | 'lg' | 'md' | Height and padding scale |
type | 'button' | 'submit' | 'reset' | 'button' | Native button type attribute |
disabled | boolean | false | Prevents interaction; adds muted styling |
loading | boolean | false | Shows spinner; blocks double-submit |
fullWidth | boolean | false | Stretches the button to fill its container |
iconLeft | ZyraIcon | null | Icon rendered before the label |
iconRight | ZyraIcon | null | Icon rendered after the label |
aria-label | string | null | null | Accessible label for icon-only buttons |
clicked (output) | MouseEvent | - | Emits on click when not disabled or loading |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders as a native <button> — keyboard accessible via Tab, Enter, and Space
- loading state sets aria-busy="true" to communicate pending status to screen readers
- disabled state communicates unavailability without removing focusability
- All variants maintain a visible 2px focus ring for keyboard navigation