## Tabs
Switch between sibling content panels from a tab bar — line, primary or card, in two sizes, with per-tab icons.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-tabs> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings.
Props:
- value: number, default 0. Zero-based index of the active tab
- type: 'line' | 'primary' | 'card', default line. Underline (line), emphasised Bold underline (primary), or filled bg-accent segment (card)
- size: 'default' | 'small', default default. Bar height / label size — small is a tighter, shorter bar
- tab-position: 'top' | 'left', default top. Orientation — top (horizontal bar, default) or left (vertical rail with the panel to the right; active indicator becomes a side border, arrow-key nav flips to up/down)
- items: JSON array, default —. Label-only bar (no panels): [{key?,label,icon?,disabled?}]. Omit to use slotted panels instead
- [data-tab]: attribute on each panel child, default —. The tab label for that panel; optional data-icon (icon name) + data-disabled
- change: CustomEvent<{value}>, default —. Composed event; read e.detail.value (index)
Tokens: border, text-secondary, text-default, text-disabled, color-primary, bg-accent, bg-hover, border-focus, radius-xs, radius-sm, font-product, motion-mid, ease-in-out.
Use when: Tabs (several peer content panels the user moves between within one screen); Segmented (switching a compact view or mode, not larger panels); Select (the choices are many or space is tight).