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 |
Tokens
CSS custom properties zyra-button reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Primary background--zyra-color-btn-primary-bg | var(--zyra-color-primary) | Fill color of the primary variant. |
Primary border--zyra-color-btn-primary-border | var(--zyra-color-primary-border) | Border color of the primary variant. |
Primary hover background--zyra-color-btn-primary-hover-bg | var(--zyra-color-primary-hover) | Fill color of the primary variant on hover. |
Secondary background--zyra-color-btn-secondary-bg | var(--zyra-color-surface-inset) | Fill color of the secondary variant. |
Secondary text--zyra-color-btn-secondary-text | var(--zyra-color-foreground) | Label color of the secondary variant. |
Secondary border--zyra-color-btn-secondary-border | var(--zyra-color-border-color) | Border color of the secondary variant. |
Secondary hover background--zyra-color-btn-secondary-hover-bg | var(--zyra-color-surface-raised) | Fill color of the secondary variant on hover. |
Secondary hover border--zyra-color-btn-secondary-hover-border | var(--zyra-color-border-hover) | Border color of the secondary variant on hover. |
Ghost text--zyra-color-btn-ghost-text | var(--zyra-color-foreground-muted) | Label color of the ghost variant. |
Ghost hover text--zyra-color-btn-ghost-hover-text | var(--zyra-color-foreground) | Label color of the ghost variant on hover. |
Danger background--zyra-color-btn-danger-bg | var(--zyra-color-danger-subtle) | Fill color of the danger variant. |
Danger text--zyra-color-btn-danger-text | var(--zyra-color-danger-foreground) | Label color of the danger variant. |
Danger border--zyra-color-btn-danger-border | var(--zyra-color-danger-border-color) | Border color of the danger variant. |
Danger hover background--zyra-color-btn-danger-hover-bg | var(--zyra-color-danger-foreground) | Fill color of the danger variant on hover — inverts with its resting text color. |
Danger hover text--zyra-color-btn-danger-hover-text | var(--zyra-color-foreground-inverse) | Label color of the danger variant on hover, kept readable against the inverted fill. |
Outline hover background--zyra-color-btn-outline-hover-bg | var(--zyra-color-primary-subtle) | Fill color of the outline variant on hover. |
Outline hover border--zyra-color-btn-outline-hover-border | var(--zyra-color-primary) | Border color of the outline variant on hover. |
Disabled opacity--zyra-btn-disabled-opacity | 0.42 | Opacity applied to any variant when disabled. |
Focus ring--zyra-btn-focus-ring | var(--zyra-ring) | Focus-visible ring shadow shown on keyboard focus. |
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