Tabs

Views of one thing, one at a time: the playground’s Structure · Lint · Graph · Outputs. The selected tab’s panel follows the list; the others are not rendered.

When to use

When several views share one subject and the page would get long stacked: a workspace, not a document.
Not for navigation between pages (that is the Nav) and not for a two-state choice inside a panel (a mode switch, as in the Detail panel).

Four views, Structure selected

Light

Structure
Collection	Modes	Role	Confidence	Variables	Aliases
Brand(Alias)	BrandA BrandB	brand	0.94	11	100%
Primitives	Value	primitives	0.90	26	0%
ScreenType	Desktop Mobile Tablet	dimension	0.92	5	100%

Graphite

Structure
Collection	Modes	Role	Confidence	Variables	Aliases
Brand(Alias)	BrandA BrandB	brand	0.94	11	100%
Primitives	Value	primitives	0.90	26	0%
ScreenType	Desktop Mobile Tablet	dimension	0.92	5	100%

Story: /stories/tabs/structure/

Lint selected, with a count; sticky on phones

Light

2 errors found. Lint failed.

Graphite

2 errors found. Lint failed.

Story: /stories/tabs/lint/

Guidelines

Look: the list is a bg-subtle well (radius-md, space-1 padding); the selected tab sits on bg-surface with a stroke-ink outline in border-strong, the others are transparent in fg-muted. Label type, 44 px tall. A count follows the label in regular weight (Lint · 3).
Keyboard (WAI-ARIA tabs, automatic activation): only the selected tab is in the tab order; ←/→ move between tabs and select them, Home and End go to the first and last. role="tablist" with a name, role="tab" with aria-selected and aria-controls, one role="tabpanel" labelled by its tab.
The page keeps the choice: the playground writes the selected tab to the URL hash (#lint), so a reload or a shared link opens the same view.
Phones: below 560 px of container width the tabs share the row in equal columns. With sticky the bar stays at the top of the screen on bg-canvas, with a hairline under it, while the panel scrolls.
Motion: with script the selected look is one indicator that moves to the new tab (motion.duration.base, motion.ease.standard); the tab’s own outline is the look without script. A tab change is a View Transition of type dta-tabs: the page stays live and only the panel crossfades while its height eases to the new content. A count that changes lights up (Changed). Under reduced motion the indicator jumps and the panel swaps at once. See Motion.

Tokens used

Read from the component’s source:

--action-bg--action-subtle--bg-canvas--bg-subtle--bg-surface--border-default--border-strong--dta-tab-h--dta-tab-w--dta-tab-x--dta-tab-y--fg-default--fg-muted--font-sans--motion-duration-base--motion-duration-fast--motion-ease-standard--radius-md--radius-sm--space-1--space-2--space-4--stroke-focus--stroke-hairline--stroke-ink--type-body-sm-size--type-label-line-height--type-label-size--type-label-weight