Live demo
Click or use arrow keys to switch tabs. Active tab shows a 2px teal indicator; inactive tabs use subdued text.
Overview panel — the active tab by default. Bold label, 2px teal indicator.
Details panel — switch here with a click or the ← → arrow keys.
History panel — any React node can be passed as tab content.
States
ActiveSemi-bold label in action/primary (teal). 2px bottom indicator in the same token.InactiveRegular-weight label in text/subtle. No indicator.Keyboard navigation
← / →Move focus between tabs; activates focused tab.HomeMove focus to first tab.EndMove focus to last tab.TabMove focus out of the tab list into the panel.Tokens used
action/primaryActive tab label color + indicator bartext/subtleInactive tab label colorborder/subtleTab bar bottom borderfont/baseLabel typeface (Inter)