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 trigger and choices share one surface, 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.
Optional sound feedback
The demo adds a quiet confirmation sound for opening, closing, and choosing a project type. It uses the site-wide Cuelume preference, so pressing M turns interface sound off or back on without changing the visual feedback.
Sona UI
Use the maintained production component.
Continue exploring
Another compact interaction for branching actions.