Menus And Actions
Pull Down Buttons
A button that looks identical at rest, then opens the same flyout menu used everywhere else in the system.
Findings
What's actually in /ig
- The legacy flyout (.uiToggleFlyout/.openToggler) is confirmed; nothing distinguishes a button-shaped trigger for it from any other trigger, because the system doesn't need to — the flyout itself is the component.
Rationale
Why this component exists
Unlike a Pop Up Button, a pull-down button's label is a fixed verb or icon — it never changes after selection, because choosing an item performs an action rather than setting a value. That's why the system doesn't need a distinct visual treatment: the button itself is just a Tertiary or Secondary Button, and 'pull down' describes the menu's behaviour, not the button's appearance.
Usage
When to use it
Use when
A single trigger should reveal several related one-off actions (a post's '...' overflow menu).
Avoid when
The choice persists as a setting — use Pop Up Buttons instead.
Anatomy
Anatomy
- 01
Button (icon or label, unchanged after selection)
- 02
Flyout menu (Menus anatomy)
Specification
Spacing, colour, type, and motion
- Trigger
- Tertiary or icon-only button — see Buttons
- Menu surface
- Identical to Menus/Context Menus
States
States
| State | Behaviour |
|---|---|
| Default | Button at rest — label or icon is fixed and never changes after selection (distinguishes it from Pop Up Buttons). |
| Hover | Button surface transitions to hover state per the Buttons token set. |
| Pressed | Button in pressed state; flyout opens on release. |
| Menu open | Flyout visible, positioned below or above the trigger. Uses Menus anatomy verbatim. |
| Disabled | Button opacity reduced, pointer-events none; all flyout actions unavailable. |
Examples
Real interface compositions
Profile
Profile more-actions trigger
The fixed 'More' button opens Block, Restrict, Share profile, and About this account actions; its label never changes because each choice performs a command.
Tertiary/icon button trigger, Menus anatomy, unchanged label
Guidance
Usage guidance
- Reuse the Buttons and Menus components directly rather than building a new trigger style — the visual distinction belongs to the menu surface, not the trigger.
Do / Don't
Do / Don't
Do
- Keep the trigger label or icon fixed regardless of what was chosen — the button's identity is the verb that opens the menu, not the last-selected value.
- Reuse the existing Tertiary or icon-only Button as the trigger with no modification.
Don’t
- Change the button label after selection — that's Pop Up Button behaviour.
- Style the trigger differently from the Buttons system; the visual distinction belongs to the flyout, not the button.
See also