Docs draft
Tabs
Component storyFigma (Tab set + TabBar) ↗React component ↗DSDS entity ↗
When to use it
useSwitching views of the same subject: Episodes / Details / Related.
avoidNavigation to different pages — tabs never change the URL context.
linkStates
rest — At rest with no interaction.
hover — Pointer is over the control.
selected — Currently selected.
focus — Holds keyboard focus and shows the focus ring.
Design specifications
| tab | 56px tall, padding-x space.24, type.label-lg |
| text-rest | color.text.secondary |
| text-active | color.text.primary |
| bar-rest | color.border.subtle |
| bar-selected | color.accent.base (3px) |
| baseline | 1px color.border.subtle under the row |
Accessibility
Arrow Left/Right — Move and activate; roving tabindex keeps one stop.
Tab — Into the active tab, then into the panel.
role=tablist/tab/tabpanel with aria-selected and aria-controls wired via useId.