Segmented Controls — macOS 27

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

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

The 􀻃 (U+100EC3) folder in component names is the kit's folder for building-block parts.

Components

294 components: 142 Dark, 152 Light. No documentation boards. The page also holds 40 instances placed outside any component (examples, listed under Kit notes).

Per appearance and context, buttons are 5 sizes × (Active: 2 × 3 states + Inactive: 2 × 2 states) = 50.

Sizes: 1 Mn (Mini), 2 Sm (Small), 3 Rg (Regular), 4 Lg (Large), 5 XL (Extra Large). Contexts: Content Area and Over-glass. Window state: Active and Inactive.

Anatomy

Control (Duo, Trio)

Derived: the track is exactly the segments placed side by side with no padding (Duo width = 2 × segment width, Trio = 3 ×), and every segment is as tall as the track. A segment that is On therefore fills its slot to the track's edges with no inset.

Segment button

Separator

Separator instances per size: Mn 1×10 @y3, Sm 1×12 @y4, Rg 1×14 @y5, Lg 1×18 @y5, XL 1×20 @y8. Derived: equal top and bottom insets of 3, 4, 5, 5 and 8.

Margin guides (Light/􀻃/Margins)

Red guide rectangles (#FF0000@30%) that mark Apple's minimum margins inside a control.

Derived: each separator group is 2 × margin + 1 wide and starts at segment width − margin − 0.5, so the margin is measured from the separator line on both sides.

Sizes

All corners use smoothing 0.6. Geometry is the same in both appearances, both contexts and every state (checked across all 200 buttons). Derived: the glyph frame is centred horizontally in every size; vertically it sits 1 point above centre in Sm, Rg, Lg and XL (for example Rg: 5 above, 4 below).

Colours and states

Track (control component)

The track is the same in Active and Inactive windows. No border, shadow or blur on any track.

Segments — Content Area

Segments — Over-glass

In an active window the selected segment is the blue accent fill with a white glyph; in an inactive window it turns into a neutral fill with the normal label colour, and there is no Clicked state.

Separator

The same separator is used in Content Area and Over-glass controls. In the page examples, a segment that is On or Clicked comes with the neighbouring separator swapped to Separator/Off (Trio examples, Dark Over-glass Duo examples) or hidden with isVisible→0 (Light Duo examples).

Text

No segment text names a shared text style. The masters label segments with the glyph 􁀄 (U+101004); controls override them with "1", "2", "3"; the page examples use 􀆉 (U+100189) and 􀆊 (U+10018A) in Duo controls and 􀌀 (U+100300), 􀌁 (U+100301), 􀌂 (U+100302) in Trio controls. Colours per state are in the tables above.

Effects

Kit notes

• The page has no documentation boards. Its free text is the page labels "Segmented Controls" with "Light" or "Dark" (SFPro-Bold 60) and two section labels, "Content Area" and "Over-Glass" (SFPro-Semibold 30, kern −0.46, #000000@50%). The kit gives no usage text beyond those labels.
• The Margins guides are Apple's way of showing spacing: a minimum margin at each end of the control and the same margin on each side of every separator (6, 8, 10, 12, 14 by size).
• Page examples outside the components: 25 use "Examples/Segmented Control" instances (5 Dark, 20 Light), 10 instances named Segmented Controls/Dark/Over-glass/Duo/Active, {size} and 5 named Segmented Controls/Dark/Over-glass/Trio/Inactive, {size}. The Over-glass-named ones point to Content Area controls with Over-glass segments swapped in.
• A loose rect "Minimum Margin: Left" 10×24 also sits on the page.

Finding it in the spec