Confirm morph

A React component in Beamline's Actions category.

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 rows, cards) where a dialog would be heavy.

Not for

Irreversible account-level actions (alert-dialog).
Actions that are safe to undo (a button plus an undo 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

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 · Connect your agent