Tab

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. Live specimen, pick one.

Tab does the job of Segmented Control with a different build. The row has no track fill and no radius, only side padding: three tabs and one rule.

The parent exposes Size and Tabs; the label, the icon and the active tab live on the nested selectors. Switching moves the rule with motion/duration/base, 200 ms on the standard curve.

How many tabs can a row hold?

Two to five tabs in the same 340 track. The 4 pt side padding never moves, so tabs split the remaining 332 evenly; only width changes. The 2 pt rule sits under the active tab and the 1 pt hairline under the whole row.

At Default a tab spends 16 of padding per side at two and three tabs, 12 at four and 6 at five, so five tabs leave 54.4 for the label. Widths match Segmented Control, 166, 110.67, 83 and 66.4, because both split the same 332.

Long labels behave differently: Segmented Control clips inside a visible pill and a tab has no edge, so keep five labels to one short word each.

Tabs ships 8 variants, two sizes across four tab counts.

How tall is a Tab?

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. The rule stays 2 pt and the icon stays 16.

Tab is 48 and 36 high, where Segmented Control is 48 and 38. They line up at Default and sit two apart at Small, because a tab has no 4 pt track padding to absorb.

The rule holds at 2 pt and the icon, when you switch it on, holds 16.

Which states does Tab have?

One state, held by one tab. Active draws a 2 pt brand/base rule inside its own bottom edge and turns the label brand/base. Inactive has no rule and a text/sub-700 label. There is no Pressed or Disabled variant in the file.

Set Active on exactly one tab. It lives on the nested selector, so every tab carries its own boolean, and it defaults to False.

The rule is a stroke on the bottom edge alone, so Figma's inspector shows a mixed stroke weight: 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, and is composed into every Tabs variant.

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. There is no fill and no shadow, which separates Tab from Segmented Control.

Four colors are the whole palette, and brand/base does three jobs: the rule, the label and the icon.

How does Tab differ on iOS and Material 3?

The iOS and Material 3 pages of the file hold bottom bars for top-level destinations and no in-page tab row. Appetite UI Tab is the in-page switch, 340 wide with a rule under the active tab.

The minimum touch target is 44 pt on iOS and 48 dp on Material 3, set by platform/min-touch-target in the Platform collection.

Default is 48 high and clears both. Small is 36 high, so give it a 44 pt hit area on iOS and 48 dp on Android in code.

When should I use Tab?

Use Tab for sibling content on one screen and Navigation for top-level destinations.

Tab and Segmented Control both switch between two and five things and are 48 high at Default, yet they do different jobs. A segmented control is a setting that applies on pick, and tabs belong to the content below them.

Pick one per screen.