Back to componentszyra-tabs
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 |
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