Morph
Morph is one button with five intents. Tap it for the primary action, or drag toward an edge to choose another. Each edge wears its action’s colour, and the chosen edge floods the button as you drag.
Drag the button right to approve, left to reject, down to snooze or up to hand it to the agent. Tap to open. With a keyboard, use the arrows and Enter.
Anatomy
When to use
- Triage queues where every item gets one of a few decisions: invoices, approvals, alerts.
- Mobile lists where a row of four buttons would crowd the screen.
- Not for irreversible actions. Morph acts on release; sealed actions need a hold.
Behaviour
| Gesture | Result |
|---|---|
| Tap | The primary action: open the item |
| Drag under 46 px | Preview: the edge thickens and its hint lights up |
| Drag past 46 px | Commit on release: the edge floods the button and its label changes |
| Release early | The button springs back. Nothing happens. |
Every committed action shows a murmur with an undo.
Best practices
- Keep the directions the same on every screen. Right always approves.
- Use state colours by meaning, not by preference.
- Label each direction around the button the first few times people use it.
Accessibility
- Arrow keys choose a direction; Enter applies it; Escape cancels.
- The button’s name lists the choice: “Review invoice 214. Arrow keys choose an action, Enter applies it.”
- Each result is announced through its murmur.
Specifications
- Commit threshold
- 46 px
- Edges
- 4 px at rest, up to 14 px when chosen
- Travel
- Up to 36 px sideways, 24 px vertically
- Settle
- 420 ms spring