Numbered tabs | Sodium design system

Sizes

When to use it

Use: A page's two to five sections that run in an order: ingest, transform, load.
Use: The head of a pipeline's page, where each stage has its own panel.
Not for: Sibling panels with no order. Use Tabs.
Not for: More than five sections. Use Tabs.

6 rules

Must: Use numbered tabs only when the sections run in an order; the index says so. Because a number promises a sequence, and numbered siblings read as steps that are not there.
Must: Keep one row of numbered tabs per page, at its head. Because the yellow bar is the brand, spent once, and two rows of it compete with the page's one action.
Never: Type the number or the brackets into the label. Because the list numbers the tabs in written order and draws the brackets, so a typed one doubles or drifts when a tab moves.
Never: Make the yellow bar the only sign of the selected tab, or paint the index yellow in light. Because sodium yellow on white is 1.4:1, so the gold index and the text-1 label carry the selection and the bar sits beside them.
Should: Keep the row to two to five tabs. Because past five the numbers stop helping and the row scrolls.
Should: Pass index to the first trigger only when the row continues an order shown elsewhere. Because the list counts from 01 in written order on its own.

5 states, highest first

4 checks

: Tabs semantics from Base UI: tablist, tab with aria-selected, tabpanel.
: The index is read as part of the tab's name ("01 Ingest"); the brackets are drawn and not read.
: Selected: the index in --accent-text (6.2:1 in light, yellow at 12.9:1 in dark) and the label in text-1; the 2px bar is decoration in light.
: Focus is the 2px ring drawn inside the tab.

2 keys

4 edge cases

Phone, 390 wide: The row scrolls sideways along its rule; the selected tab scrolls into view.
Dark theme: The index and the bar are both sodium yellow on the near-black page.
Forced colors: The bar takes the Highlight colour.
Ten or more: The index grows to two digits from the start, so 01 and 10 line up.

5 props

11 tokens