Tab
Tab switches between related views inside a single screen.
Preview
An in-page switch between sibling sets of content. It changes what sits below it, never the top-level destination. Default size, three tabs, icon on. Live specimen, pick one.
Same job as Segmented Control, a different component underneath. No track: the outer frame has no fill, no radius, side padding only, so this is three tabs and one rule. Like Segmented Control, the parent exposes only Size and Tabs; label, icon and which tab is on live on nested selector instances. Every tab reads Option.
Tabs
Two to five tabs in the same 340 track. The 4px side padding never moves, so tabs split the remaining 332 evenly; only width changes. No rule across the track, only under the active tab.
Tabs ships 8 variants, 2 sizes across 4 tab counts. At Default a tab spends 16 of padding per side, so five leave 34.4 for the label. Widths match Segmented Control, 166, 110.67, 83 and 66.4, both split the same 332. Long labels differ: Segmented Control clips inside a visible pill, this clips against nothing, so five real words run together with no edge between tabs.
Size
Two heights, 48 and 36. The tab fills the track, so only padding and label change: 12 and 16 with a 16/24 label becomes 8 and 12 with 14/20 at letter spacing .1. Rule stays 2, icon stays 16.
48 and 36, where Segmented Control is 48 and 38. They line up at Default and sit two apart at Small, because this component has no 4px track padding to absorb. Everything else is the tab: padding 12 and 16 down to 8 and 12, label 16/24 down to 14/20. Rule holds at 2, icon holds 16, so at Small the glyph takes a bigger share of a shorter tab.
State
One state, held by one tab. Active draws a 2px brand/base rule inside its own bottom edge and turns label and icon brand/base. Inactive has no rule, a text/sub-700 label and an fg/soft-500 icon.
Exactly one tab should hold it and, as on Segmented Control, the file cannot enforce that: Active lives on the nested selector, so every tab carries its own boolean. The defaults differ on paste: this selector defaults Active to False, the Segmented Control one to True. The rule is a stroke on the bottom edge alone, which Figma reports as a mixed stroke weight, not a border. Read it as an underline.
Properties
Two variant axes on the published component. The rest sit on the selector inside it, a building block not meant for direct use.
The selector ships 4 variants, active across size. It is composed into every Tabs variant, so a change there reaches all eight. Two names need tidying: the set is called Tabs while this page, the sidebar and the URL say Tab, and the frame inside the selector is still called _SegmentedControl-selector, left over from the component this was copied from. Neither changes a pixel; both cost a minute in search.
Tokens
Every value the component reads, resolved through its aliases to the primitive underneath.
Radius is dimensions/radius/none on the track and on the tab. No fill and no shadow anywhere, which separates it from Segmented Control. Three colours is the whole palette, and brand/base does three jobs: the rule, the label and the icon. On the sibling the icon holds fg/soft-500 whether the segment is on or not. Here selection reaches every part of the tab, and the rule still marks it when the colour does not.
Guidelines
Use tabs for sibling content on one screen. The tab swaps what sits under it and leaves the rest of the screen where it was.
Do not move between top-level destinations with tabs. That is Navigation, and a tab that replaces the whole screen leaves no way back.
The component description carries the whole rule: this does not change the top-level destination, Navigation does. The second rule is against Segmented Control. Both switch between two and five things, both are 48 tall at Default, and they are not interchangeable: a segmented control is a setting applied on pick, tabs belong to the content below them. Pick one per screen.