`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `tabs` | `(string \| { label, value?, href?, disabled?, icon?, badge? })[]` | — | Tabs in order. A string is a label; an object adds a `value` (panel slot name and event value, defaults to the index), an `href` (renders a link, no panel), `disabled`, an `icon` (Lucide component) or a `badge` (count or short text, shown from `md`). | | `value` | `string` | first enabled tab | Value of the tab shown first. | | `variant` | `'bordered' \| 'borderless' \| 'pills' \| 'pills-raised' \| 'primary' \| 'feature'` | `'bordered'` | Underline with a list border, underline alone, chip, chip in a raised tray, a primary-tinted chip, or a feature tab (title and line over a thick bar). | | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | `vertical` stacks the list beside the panels; Up and Down move between tabs; underline variants draw on the start edge. | | `fullWidth` | `boolean` | `false` | Tabs share the list width equally (horizontal only). | | `activation` | `'automatic' \| 'manual'` | `'automatic'` | `manual`: arrows move focus, Enter or Space selects. Use it when a panel is expensive to show. | | `label` | `string` | `'Sections'` | Name of the `

` when every tab is a link. | | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Tab height and text size. | | `class` | `string` | — | Extra classes on the root, merged last. | Panels are slots named `panel-`: `panel-0`, `panel-1`, … for string tabs, `panel-billing` for `{ value: 'billing' }`. ## Variants Every `variant`: ```astro … … … … … ``` ## Feature tabs `variant="feature"` makes each tab a title and a `description` over a thick bar, for feature sections; vertical feature tabs put the bar on the start edge. The title names the tab and the line describes it. Put the panels above the row with `flex flex-col-reverse` on the root. ```astro … … ``` ## Sizes ```astro … … … ``` ## Items Objects add a `value`, a link (`href`), `disabled` or a `description` (feature tabs); `value` on the root picks the tab shown first. ```astro

Overview of the account.

Invoices and payment method.

``` Icons and badges: ```astro … ``` ## Orientation `vertical` puts the list beside the panels, for settings pages: ```astro … ``` ## Full width ```astro … ``` ## Activation `manual`: arrows move focus without switching panels; Enter or Space selects. ```astro … ``` ## Overflow The list scrolls, the hidden edge fades, and the selected tab is scrolled into view. ```astro

…

… ``` The tab that starts active is not scrolled into view on load. Put it among the first visible tabs, or call `scrollIntoView` on it. ## States - **Selected** — the active tab has an accent underline and `aria-selected="true"`; its panel is visible. - **Hover / focus** — inactive tabs lighten on hover; keyboard focus shows a visible ring (`focus-visible:outline-focus`). - **Disabled** — dimmed, not clickable, skipped by the arrows. - **No JS** — every panel is shown (the `no-js:block` fallback). ## Examples Every tab a link (category pages, a blog filter): the row becomes a `

` named by `label`, and `value` marks the current page with `aria-current="page"`. Tab moves through the links; the arrow keys are left alone. ```astro ``` More than a handful of tabs — they wrap; the pattern is unchanged: ```astro

At-a-glance summary.

Charts and trends.

Exportable reports.

Alert preferences.

``` ## Events The root dispatches `apogee:tabs-change` (`detail: { index, value }`, bubbling) whenever a tab is selected. ## Accessibility | Key | Action | | --- | --- | | `Tab` | Moves focus into the tablist (one stop), then to the active panel. | | `←` `→` | Move between tabs and select, wrapping at the ends; swapped under `dir="rtl"`. | | `↑` `↓` | With `orientation="vertical"`, move between tabs instead of `←` `→`. | | `Home` `End` | First / last tab. | | `Enter` `Space` | With `activation="manual"`, select the focused tab (arrows then only move focus). | - Full **WAI-ARIA tabs pattern**: `role="tablist"` / `role="tab"` / `role="tabpanel"`, wired with `aria-selected`, `aria-controls`, and `aria-labelledby`. - A feature tab is named by its title (`aria-labelledby`) and described by its line (`aria-describedby`). - Each panel is focusable (`tabindex="0"`), so `Tab` from the active tab lands on its panel before moving on. - **Focus** — a visible `focus-visible` ring on each tab. - **No JS** — panels are never trapped: with scripts off every panel renders, so the content is fully reachable. - The panel enter animation respects `prefers-reduced-motion`. ## Tokens | Token | Used for | | --- | --- | | `--border-neutral` | Tablist bottom rule + inactive tab border | | `--border-primary` | Selected tab underline | | `--foreground-neutral` / `--foreground-neutral-faded` | Active vs. inactive label colour | | `--outline-color-focus` | Focus ring | | `--duration-medium` / `--ease-standard` | Panel enter animation | ## Do / Don’t - **Do** keep labels to one or two words so the tablist stays scannable. - **Do** use tabs for parallel, peer-level content — not for a sequence (use `Steps`) or for progressive disclosure of one thing (use `Accordion`). - **Don’t** put a form that must submit as a whole across multiple tabs — a user can’t see all fields at once. - **Don’t** hide critical content behind a non-default tab if a no-JS user must act on it immediately (though it stays reachable, it’s below the fold). ## Content - Labels are nouns, sentence case, one or two words (“Account”, “Billing history”). - No ending punctuation. Don’t number them — the order is the sequence. ## Related [ SegmentedControlA row of connected, mutually exclusive options backed by native radios — pick one from a small, always-visible set. ](https://apogee.avaui.dev/docs/segmented-control)[ ContentToggleShows one keyed child at a time and slides between them, for pagers and step content. ](https://apogee.avaui.dev/docs/content-toggle)[ ToggleButtonGroupConnects ToggleButtons into a segmented bar — single-select or multi-select. ](https://apogee.avaui.dev/docs/toggle-button-group)