Tabs
Tab navigation with 4 style variants, 3 sizes, icons, badges, closeable tabs, vertical orientation, and full keyboard support.
Overview content goes here.
API
All inputs and configuration options for zyra-tabs.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'underline' | 'pill' | 'filled' | 'outlined' | 'underline' | Visual style of the tab list |
size | 'sm' | 'md' | 'lg' | 'md' | Trigger padding and font size |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Stacks tabs vertically on the left when set to vertical |
tabChange (output) | string | - | Emits the activated tab's tabId (or auto-generated uid) |
tabClose (output) | string | - | Emits the closed tab's tabId when a closeable tab is dismissed |
label | string | - | (on zyra-tab) Text shown in the trigger button — required |
icon | string | '' | (on zyra-tab) Emoji or glyph rendered before the label |
badge | string | number | '' | (on zyra-tab) Count shown after the label; accent-highlighted when active |
closeable | boolean | false | (on zyra-tab) Shows × button; Delete/Backspace also closes the focused tab |
tabId | string | auto-generated | (on zyra-tab) Optional ID emitted on tabChange / tabClose outputs |
disabled | boolean | false | (on zyra-tab) Prevents activation; skipped by keyboard navigation |
Tokens
CSS custom properties zyra-tabs 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 |
|---|---|---|
Text--zyra-color-tabs-text | var(--zyra-color-foreground-muted) | Label color of an inactive, enabled trigger. |
Text (hover)--zyra-color-tabs-text-hover | var(--zyra-color-foreground) | Label color of a trigger on hover. |
Text (active)--zyra-color-tabs-text-active | var(--zyra-color-primary) | Label color of the active trigger. |
Border--zyra-color-tabs-border | var(--zyra-color-border-color) | Border color used by the list, panels, and (in outlined/filled/pill variants) each trigger. |
Indicator--zyra-color-tabs-indicator | var(--zyra-color-primary) | Color of the underline (underline variant) or fill (filled variant) marking the active tab. |
Badge background--zyra-color-tabs-badge-bg | var(--zyra-color-primary-subtle) | Fill color of the count badge on an inactive tab. |
Badge text--zyra-color-tabs-badge-text | var(--zyra-color-primary) | Text color of the count badge on an inactive tab. |
Badge background (active)--zyra-color-tabs-badge-active-bg | var(--zyra-color-primary) | Fill color of the count badge on the active tab. |
Badge text (active)--zyra-color-tabs-badge-active-text | var(--zyra-color-on-brand) | Text color of the count badge on the active tab, and of the active trigger in the filled variant. |
Pill active background--zyra-color-tabs-pill-active-bg | var(--zyra-color-pill-active-bg) | Fill color of the active trigger in the pill variant. Tuned per theme. |
Pill active shadow--zyra-tabs-pill-active-shadow | var(--zyra-pill-active-shadow) | Drop shadow lifting the active trigger in the pill variant. Tuned per theme. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Triggers use role="tab" with aria-selected and aria-controls
- Panels use role="tabpanel" with aria-labelledby linking to trigger
- Horizontal: Arrow Left/Right navigate triggers; Vertical: Arrow Up/Down
- Tab key moves focus into the active panel
- Disabled tabs have aria-disabled and are skipped by arrow key navigation
- Delete or Backspace closes the focused tab when it has closeable set
- Close button has aria-label="Close <label>" for screen reader support