Toggle
Pressable button that holds a boolean pressed/unpressed state — for toolbar actions, formatting controls, and filter pills.
API
All inputs and configuration options for zyra-toggle.
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean | false | Current pressed state; two-way bindable via [(pressed)] |
size | 'sm' | 'md' | 'lg' | 'md' | Physical size of the button |
disabled | boolean | false | Disables interaction |
aria-label | string | null | null | Accessible name when the projected content is icon-only |
changed (output) | boolean | - | Emits the new pressed value whenever the toggle changes |
Tokens
CSS custom properties zyra-toggle 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 |
|---|---|---|
Border--zyra-color-toggle-border | var(--zyra-color-border-strong-color) | Border color when unpressed. |
Background (pressed)--zyra-color-toggle-bg-on | var(--zyra-color-primary-subtle) | Fill color when pressed. |
Foreground (pressed)--zyra-color-toggle-fg-on | var(--zyra-color-primary) | Text/border color when pressed, and border color on hover while unpressed. |
Focus ring--zyra-toggle-ring | var(--zyra-color-primary-subtle) | 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> with aria-pressed to communicate state
- Provide aria-label when the projected content is icon-only
- Keyboard-operable via Space/Enter and Tab to focus