Expanding Action
A single action that becomes a focused set of related choices without leaving its original context.
- Category
- Interaction
- Year
- 2026
- Status
- Experiment
What it is
One action, then a small decision.
The control starts as “Create project”. Activating it changes the same surface into three project types, so the follow-up choice remains attached to the action that introduced it.
It works best when there are only a few short, equally important choices. A longer list, a navigation system, or a destructive action needs a different pattern with more room for scanning and confirmation.
Design decisions
The state change should feel like a continuation, not a replacement.
Expansion in place
The measured surface changes width around the trigger and choices, preserving where the interaction began and avoiding a separate popover or page transition.
A bounded choice set
Three labels keep the expanded state readable on narrow screens. The control can scroll horizontally when a consumer supplies wider content.
Clear recovery
A labelled back button restores the original trigger. Visible focus rings, disabled states, and reduced-motion support remain part of the component.
Measured motion
The surface measures its next content width before it moves. The expansion stays contained while it animates, then permits horizontal scrolling when a consumer provides wider content.
Sona UI
Use the maintained production component.
Continue exploring
Another compact interaction for branching actions.