Menus And Actions
Pop Up Buttons
A tertiary button that displays the current selection and persists it as its own label once the menu closes.
Findings
What's actually in /ig
- The two parts of this component are confirmed: the tertiary button (border, 6px radius) and the legacy flyout (.uiToggleFlyout/.openToggler).
Rationale
Why this component exists
A pop-up button is a tertiary button whose label is data instead of a verb. It borrows the trailing chevron from Disclosure Controls to signal 'more choices live here' and writes the selected value back into the button itself on close, so the control always shows current state without needing a separate label.
Usage
When to use it
Use when
Choosing one value from a small, named set where the current choice should stay visible after selecting (a sort order, a privacy level).
Avoid when
The action doesn't represent a persisted setting (use Pull Down Buttons) or the option set is large enough to need search (use Pickers).
Anatomy
Anatomy
- 01
Tertiary button surface
- 02
Current value label
- 03
Trailing chevron
- 04
Flyout menu (Menus anatomy)
Specification
Spacing, colour, type, and motion
- Height
- 36px, matching the tertiary button and text field height tier
- Radius
- var(--input-border-radius) — 6px
- Border
- rgb(var(--ig-tertiary-button-border))
- Chevron
- 16px, rotates with the open/closed state — see Disclosure Controls
States
States
| State | Behaviour |
|---|---|
| Default | Shows the current value; border at --ig-tertiary-button-border. |
| Open | Flyout visible; chevron rotated 180°. |
| Disabled | Opacity .5, matching the documented Buttons disabled treatment. |
Examples
Real interface compositions
Comments
Comment sort selector
The tertiary button reads 'Newest first' after selection, opens a compact flyout, and writes the chosen sort order back into the trigger so current state remains visible.
36px tertiary button, 6px radius, trailing chevron, Menus flyout
Do / Don't
Do / Don't
Do
- Always render the current value as the button's label, never a generic placeholder like 'Select...'.
Don’t
- Use a pop-up button for an action that doesn't persist a value — that's a Pull Down Button instead.
See also