Draft
Components
Tabs.
Beta — usable, but the API may still change.
Horizontal tabs switch between views of the same object or context — they do not navigate between pages.
When to use
Tabs are a keyboard pattern first, a visual one second. Follow these rules before reaching for them.
Few groupingsThe fewer tabs the better. Overflow turns the list into a carousel and hides options from users who never scroll.
One row onlyNever stack two rows of tabs — stacking makes the active indicator ambiguous and breaks the ARIA tablist model.
Default firstPut the highest-use content in the first tab and pre-select it. Supplemental content goes in later tabs; no tab should be empty.
Short labels1–2 words, plain language, sentence case. Never ALL CAPS. Labels must scan at a glance — if it needs an explanation it is not a label.
Not for comparingTabs hide all but the active section. When users need to see two sections at the same time, use a side-by-side layout instead.
Not navigationDon't use tabs as primary navigation between different product areas. That belongs in the sidenav. Don't mix in-page and cross-page tabs in one control.
Variants
Four indicator-position variants. Default and Bottom work for horizontal lists; Start and End are for vertical arrangements only.
DefaultIndicator line at the top of the selected tab. Standard for most horizontal surfaces.
BottomIndicator line at the bottom of the selected tab. Use when the tab list sits above a card or panel with a visible top border.
StartIndicator line on the left edge of the selected tab. Vertical lists only.
EndIndicator line on the right edge of the selected tab. Vertical lists only.
Default
Bottom
Start
End
States
Use at least two selection indicators — line plus weight — especially critical when there are only two tabs.
RestingTab is visible and inactive. Label at standard weight. Must stay clearly readable — never fade unselected tabs to the point of invisibility.
SelectedActive tab. Label semibold, indicator visible. When only two tabs exist, use line and weight together so selection is unambiguous.
DisabledTab exists but is not actionable. WCAG exempts disabled controls from contrast requirements, but prefer hiding over disabling wherever possible.
Overview
Overview
Overview
Anatomy
A tablist, one selected tab, and a single visible panel.
Height
58 pxPadding
16 px left / rightLabel
Manrope SemiBold 16 / 24Indicator
2 pxIcon to label gap
10 pxList
role="tablist" — wraps all tabs; takes aria-label or aria-labelledbyPanel
role="tabpanel", tabIndex="0" — one visible panel tied to the active tab via aria-controlsDo & don't
Accessibility
Tabs are a keyboard pattern first, a visual one second.
role="tablist"Wraps the row of tabs; labelled with aria-label or aria-labelledby.role="tab"Each tab; the selected one carries aria-selected="true".role="tabpanel"The content region, tied to its tab via aria-controls / aria-labelledby.Arrow keysLeft / Right move between tabs; Home / End jump to first / last.Tab keyMoves focus out of the tablist into the active panel — not between tabs.Enter / SpaceActivates the focused tab when focus and selection are managed separately (manual activation pattern).