Pop-up and Pull-down Buttons — macOS 27

Read when: you need an exact macOS 27 value for pop-up and Pull-down Buttons (size, colour, text, effect) as Apple's kit draws it. Owns: Pop-up and Pull-down Buttons in Apple's macOS 27 kit: components, anatomy, sizes, colours and states, text, effects, kit notes.

Source: specs/pop-up-and-pull-down-buttons.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.

Components

The page has 120 components in two families with the same axes. There are no documentation boards (BOARD) on this page.

Each family has every combination: 2 appearances × 2 contexts × 5 sizes × 3 states. Neither family has Hover, Inactive, On or Off states.

Both families use only the 01 - Bordered shared styles from control-styles-content-area.md / control-styles-over-glass.md, the same group as the Bordered push button and the Arrow Buttons in buttons.md.

Anatomy

No component contains a nested component (use). Each one is a frame with two text layers, the glyph listed first.

Derived and checked on all 120 components:

• The glyph box is a square as tall as the button, flush with the right edge (x = 120 − H, y = 0).
• The label starts at the left padding and ends exactly where the glyph box starts (label x + width = glyph x), so the visible gap between them is 0 whatever the stack gap says.
• The label is centred vertically: label y = (H − label height) / 2.
• The kit draws every size at width 120. It gives no minimum or maximum width.

Sizes

Every listed corner has smoothing 0.6.

Pop-up Buttons

Pulldown Buttons

Derived: height and corner radius are the same as the push buttons in buttons.md at every size. The left padding matches the push buttons' label inset only at Mn (7) and Sm (10); from Rg up it is 12, 14 and 18, where push buttons use 16. The kit gives no right padding: the glyph box fills the right end.

Irregular values, stored this way in the kit:

• The stack gap is 0, 1, 4 or 5 depending on variant, but in every variant the label runs up to the glyph box, so the gap value changes nothing in the drawn layout.
• Pop-up Over-glass Mn has gap 1 in Idle and 5 in Clicked and Disabled. Pop-up XL has gap 0 where Pull-down XL has 4.
• Pull-down Sm has a 90 × 16 label box in Content Area and 90 × 13 in Over-glass.
• At Mn the Pop-up label box is 97 × 12 with no line height, and the Pull-down label box is 97 × 14 with lh14.

Colours and states

Each row holds for all five sizes. Label and glyph always share one colour. No layer on this page has a border, shadow, inner shadow or blur.

Pop-up Buttons

Pulldown Buttons

Derived: both families are identical in colour. Content Area labels in Light use #000000@85% {Labels/Light/1 Primary}; Over-glass labels in Light use the vibrant #363636 {Labels/Light Vibrant (use plus darker)/1 Primary} with plus-darker. Clicked keeps the label colour of Idle and only darkens the fill (Light Content Area 8 % → 16 %). The Bordered push button in buttons.md uses the same 01 - Bordered fills but a different Light Content Area label colour (#363636); the pop-ups use #000000@85%.

Text

No text layer references a shared text style (the file has no textstyle token), and no component text sets tracking. The label text in every component is "McIntosh".

Colours per state are in Colours and states. Derived: SFPro-Medium is not one of the weights in text-styles.md.

Effects

There are no shadows, inner shadows, background blurs, glass effects or borders on this page. The layer lines carry only fill, corners, stack, opacity (page headings only) and blend tokens. The glass that Over-glass variants are drawn on is in materials.md.

Content Area variants use plain fills and no blend modes.

Kit notes

The page has no documentation boards and no notes from Apple. Its only loose layers are section headings: "Pop-Up Button" and "Pull-Down Button" (each in black and in white), "Light" and "Dark" at 50 % opacity, and "Content Area" / "Over-Glass". The page title is "􀆏 Pop-up and Pull-down Buttons" (􀆏 U+10018F); the component paths spell the second family Pulldown Buttons.

Finding it in the spec