# Confirm morph

A React component in [Beamline](https://beamline.io/)'s [Actions](https://beamline.io/components/actions) category. Live demo: https://beamline.io/components/confirm-morph

A destructive action that asks in place: the button morphs into its question, then into working, then into the result with Undo or Retry, without a dialog.

## Use it for

- Destructive or costly actions in dense places ([table](https://beamline.io/components/table) rows, cards) where a dialog would be heavy.

## Not for

- Irreversible account-level actions ([alert-dialog](https://beamline.io/components/alert-dialog)).
- Actions that are safe to undo (a [button](https://beamline.io/components/button) plus an undo [toast](https://beamline.io/components/toast)).

## Anatomy

- trigger
- question with Cancel and Confirm
- working status
- result with Undo
- error with Retry

## Variants

- **tone**: danger, neutral

## States

- idle
- confirming
- pending
- done
- error
- undoing

## Keyboard

- Enter opens the question
- focus starts on Cancel
- Escape cancels
- focus returns to the trigger

## Motion

The frame resizes on a 280 ms ease while each state cross-fades with a slight blur; reduced motion swaps instantly.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label / icon / prompt` | `ReactNode` | — |  |
| `labels` | `Partial<{ confirm, cancel, pending, done, error, retry, undo, undoing }>` | — |  |
| `onConfirm / onUndo` | `() => void \| Promise<unknown>` | — |  |
| `step / defaultStep / onStepChange` | `"idle" \| "confirming" \| "pending" \| "done" \| "error" \| "undoing"` | — |  |
| `autoCancelAfter / resultFor` | `number (ms)` | `6000 / 5000` |  |
| `dismissOnOutside` | `boolean` | `true` |  |
| `tone` | `"danger" \| "neutral"` | `"danger"` |  |
| `style / ref` | `CSSProperties / native Ref` | — | native HTMLDivElement |
| `classNames` | `ConfirmMorphClassNames` | — |  |

## Dependencies

`lucide-react`, `motion`

## Import

```tsx
import { ConfirmMorph } from "@/components/confirm-morph/confirm-morph";
```

## Get it

Confirm morph is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Actions

- [Button](https://beamline.io/components/button): The action control: five weights and a brand fill, a buy/sell tone, sm/md/lg and a 44 px touch size, icon-only, a loading state that keeps its size and…
- [Copy button](https://beamline.io/components/copy-button): Copies a value and confirms in place: the icon becomes a check and the label says Copied; a refused copy says so instead of pretending.
- [Hold to confirm](https://beamline.io/components/hold-to-confirm): Confirms a costly action by holding instead of clicking: a fill sweeps across while held and drains if let go early; pointer, touch, Space and Enter all…
- [Split button](https://beamline.io/components/split-button): One obvious action joined to a menu of close alternatives; both halves are real buttons and the menu uses the shared menu rows.
- [Swipe actions](https://beamline.io/components/swipe-actions): Row actions behind a swipe on touch screens, mirrored in a menu at the row's end for pointer and keyboard; a full swipe runs the edge action.
- [Theme switch](https://beamline.io/components/theme-switch): The light/dark control: the page changes in one of four transitions starting from the button (reveal, eclipse, split, rise), and the icon turns between…