Morph Button
A full-width action that expands in place into confirm or success, then reverse-morphs back onto the same button.
Place
Buy · €1,250.00
Cancel
Cancel this order?
This order will not be executed or placed.
Click Place or Cancel, then Go back / Keep. The card should shrink onto the idle button — the same motion in reverse, not a drop or a sit at the end.
Playground
<MorphButton />Usage
Use a Morph Button when the next step is a short in-place confirm (place an order, cancel an order) — not a dialog, and not a new screen.
The idle button stays in a fixed slot. Extra copy (title, Confirm) grows up from that slot. Collapse is the reverse: the extra copy shrinks away and the bottom CTA never leaves its place.
Phases are a small machine:
| Phase | What you see |
|---|---|
idle | The original action (Buy, Cancel order, …) |
confirm | Title + primary confirm, with Go back / Keep in the same slot as idle |
success | Done in that slot; title above |
There is no package export yet. Place and Cancel docks in product UI are the implementations — copy that motion, don’t invent a second one.
Props
The docks take a phase plus the callbacks for that flow (onPlaceClick /
onGoBack / onConfirm / onDone, or Cancel’s onKeep). Native button
attributes stay on the inner Buttons.
Changelog
- 13 August 2026 — Documented. Go back reverse-morphs onto the idle CTA. Full notes