Tabs | Sodium design system

Sizes

When to use it

Use: One thing has several panels the person moves between: a pipeline's runs, schema and settings.
Use: The panels are siblings; none comes first.
Not for: The panels are a page's few sections in order. Use Numbered tabs.
Not for: One set of data is shown two ways: a chart or a table. Use Segmented control.
Not for: Each tab is its own page with a URL; use links. Use Breadcrumb.

6 rules

Must: Name each tab with one or two words in sentence case; the tab sets the capitals. Because mono capitals take room, and a long label pushes the row into scrolling.
Never: Recolour the selected tab's bar yellow or put the selection wash under a tab. Because yellow belongs to the one action and to numbered sections, and a washed tab reads as a chosen value.
Should: Put a count after a label with TabsCount. Because it sets the number in tabular figures and text-3, so the label still leads.
Never: Box the tab panel in its own frame under the list. Because the list's rule already divides the view, and a frame under it is a box in the region.
Should: Use size="sm" inside a frame's header or a toolbar, the default at the top of a view. Because a 26px tab fits a 40px header row with clear space.
Should: Disable a tab only when its panel cannot exist yet, and say why nearby. Because a disabled tab cannot be focused to read a reason.

5 states, highest first

3 checks

: The list is role="tablist"; each tab is role="tab" with aria-selected, and its panel role="tabpanel".
: The selected tab is text-1 with a 2px ink bar, so it does not rely on colour alone; others are text-2 at 7.8:1.
: Focus is the 2px ring drawn inside the tab, so the scrolling list never clips it.

3 keys

4 edge cases

More tabs than room: The list scrolls sideways with no bar; the selected tab scrolls into view.
Phone, 390 wide: The rule runs the full width and the tabs scroll along it.
Right to left: Tabs run right to left and the arrow keys follow.
Reduced motion: Nothing changes: the bar already cuts to the new tab.

4 props

10 tokens