Tab Bars — iOS 27

Read when: you need an exact iOS 27 value for tab Bars (size, colour, text, effect) as Apple's kit draws it. Owns: Tab Bars in Apple's iOS 27 kit: components, anatomy, sizes, colours and states, text, effects, kit notes.

Source: specs/tab-bars.txt from Apple's iOS 27 UI Kit (Sketch, v27.1.3), read 2026-11-01. Values are copied from the kit; derived values say so.

Components

84 components. Names that start Tab Bars/􀻃/ (U+100EC3) are the kit's building blocks; the full bars and the examples are made from them. The page has no documentation boards.

"N Tabs" in a Tabs - Search group counts the search tab: Tabs - Search/5 Tabs holds four tabs plus the search tab (derived from the instances it contains).

Anatomy

iPhone tab bar (402 × 99)

Derived: 21 + 360 + 21 = 402 wide; 16 + 62 + 21 = 99 tall. The tab group master is 346 × 62; the bar stretches it to 360.

iPhone tab groups (346 × 62)

Tabs - No Search/<N> Tabs: one glass capsule.

Tabs - Search/<N> Tabs: two glass shapes, the tabs on the left and a round search button on the right.

iPhone tab items

Derived: in Tab - Default/Default the symbol and label are both 54 wide at x 9, so 9 pt each side of the 72 pt item; the label sits 36 − (7 + 28) = 1 pt below the symbol layer. The selection pill is 8 pt wider than the item and starts 4 pt to its left.

Glyphs the instances set on Tabs 2–5 (text overrides): 􀀁 U+100001 (Tab 2), 􀛤 U+1006E4 (Tab 3), 􀟇 U+1007C7 (Tab 4), 􀂓 U+100093 (Tab 5).

iPhone search-tab states

Derived: Placeholder/Value width 28 + 48 + 12 + 286 + 28 = 402; height 0 + 48 + 28 = 76. Typing height 48 + 14 + 332 = 394.

Inside the Typing state's 402 × 48 row:

Derived: 8 + 330 + 8 + 48 + 8 = 402.

iPad tab bar (510 × 44)

Derived: 4 + 52 + 398 + 52 + 4 = 510; 71 + 65 + 65 + 66 + 65 + 66 = 398.

The unselected tab instances are 36 tall @y0 in Light but 20 tall @y8 in Dark (as stored).

iPad tab items

Derived: label item 11 + 43 + 11 = 65; symbol item 14 + 24 + 14 = 52 and 8 + 20 + 8 = 36.

iPhone Duo tab items (48 × 48)

Roots are filled with the kit swatch x. Kit/Nested Symbol BG (#4CA6FF@60% Light, #0059B2@60% Dark).

iPhone Duo tab groups (vertical, 48 wide)

Heights:

Derived: No Search height = 6 + N × 48 + (N − 1) × 2 + 6 (5 tabs: 6 + 240 + 8 + 6 = 260). Search tabs stack = 6 + (N − 1) × 54 + (N − 2) × 2 + 6 (5: 6 + 216 + 6 + 6 = 234); total = tabs stack + 8 + 48.

Examples

Derived: on iPhone the bar ends at the screen's bottom edge (775 + 99 = 874); the iPad bar is centred ((1210 − 507.4) / 2 = 351.3); the iPhone Duo inner portrait bar is centred ((669 − 409) / 2 = 130) and ends at the bottom (852 + 99 = 951); the vertical bars sit at the right edge (382 + 84 = 466, 867 + 84 = 951).

Sizes

iPhone tab groups

Derived: glass group width = 8 + tabs + 8 (5 × 66 + 16 = 346; 4 × 63 + 16 = 268). With fewer tabs the No Search group is centred in the 346 frame ((346 − 276) / 2 = 35, (346 − 202) / 2 = 72). The gap between the tabs group and the search button is 12 in Dark (284 − (4 + 268)) and 8 in Light (284 − 276).

Colours and states

iPhone tab items

The Light Tabs - No Search/5 Tabs group also sets color:fill-1→#FF383C {System Colors/Light/1 Red} on each of its five tab instances. The layer it targets is not in the dump (hidden layers are left out), and no other group sets it.

iPad tab items

Dark iPad unselected items use the Secondary Liquid Glass label, where Light and the iPhone items use Primary. Dark iPad selected items use the Light blue swatch (#0088FF); Dark iPhone items use the Dark blue (#0091FF).

iPhone Duo items

Search field (Typing state)

Pressed, disabled or badge states: Not in the kit. The only states are unselected and selected.

Text

No layer binds a shared text style. iPhone Duo items have no label. The kit's placeholder text: "Label" (iPhone master), "Tab 1"–"Tab 6" (instance overrides), "Search", "Search Placeholder String" (example override).

Effects

Bars and groups use the shared glass styles in materials.md; the inline values match the tokens (checked by script on 46 styled lines). The iPad bar and the Dark Typing search field store corners max smoothing0.6 style0 instead of style1.

Light search button group (unstyled, 8 layers: the four Light horizontal Tabs - Search groups and the four Light iPhone Duo vertical ones). Its effects, as stored:

• fill #000000@25% + #FFFFFF@25% + #444444@60% (blend plus-lighter) + #F8F8F8@20% (blend luminosity)
• inner-shadows: x±20 y0 blur20 spread-30 #D9D9D9 (plus-darker); x0 y±4 blur0.5 spread-4 #666666 (plus-lighter); x0 y±1 blur0 spread0 #171717 (plus-lighter); x0 y40 blur30 spread-40 #E6E6E6 (plus-darker); x0 y±40 blur10 spread-40 #282828 (plus-lighter)
• shadows: x0 y8 blur15 spread0 #000000@2%; x0 y0 blur0 spread0.5 #D9D9D9 (plus-darker); x±1.25 y0 blur0 spread-0.75 #CCCCCC (plus-darker)
• blur glass radius6 saturation2 brightness1 distortion0.4 depth0.8 chromatic0
• corners max smoothing0.6 style1

Compared with Liquid Glass/Light/Regular - Small, the fill order differs and the three outer edge shadows are #D9D9D9 / #CCCCCC instead of #DBDBDB.

Blend modes on content: unselected labels and glyphs use plus-darker in Light and plus-lighter in Dark; the selected shape uses the same pair, over a 50% white (Light) or 50% black (Dark) base fill.

Kit notes

The page has no documentation boards. Its only non-component layer is a _Header instance (1600 × 126) with the title "Tab Bars" and a description the dump cuts off after "A tab bar lets people navigate between t…". The full text is Not in the dump.

What the examples show (summarised from their layout): on iPhone the tab bar is a floating glass group inset 21 pt from the sides, sitting at the bottom of the screen; "Prominent Tab" splits search into its own round glass button; selecting search turns the bar into a search field next to a 48 pt button, and typing raises it above the keyboard with a clear button. On iPad the tab bar is a 44 pt glass capsule, centred horizontally at y 29 (the status bar layer above it is 32 tall, so they overlap by 3 pt as stored). On iPhone Duo the outer display and landscape layouts use a vertical tab bar at the right edge; the inner portrait display uses the horizontal bar.

Finding it in the spec