Confirm Morph
An inline question button that morphs in-place for destructive or confirmation flows with undo and countdown timeout.
Installation
npx viora-ui@latest add confirm-morphpnpm dlx viora-ui@latest add confirm-morphnpx viora-ui@latest add confirm-morphbunx viora-ui@latest add confirm-morphStep 1: Install Dependencies
npm install motion lucide-reactStep 2: Copy the Source Code
Copy confirm-morph.tsx into your @/components/arc/confirm-morph/ directory.
Usage
import { Trash2 } from "lucide-react";
import { ConfirmMorph } from "@/components/arc/confirm-morph/confirm-morph";
export function DeleteSelection({ ids }: { ids: string[] }) {
return (
<ConfirmMorph
label="Delete"
icon={<Trash2 size={16} strokeWidth={1.75} />}
prompt={`Delete ${ids.length} files?`}
onConfirm={() => deleteFiles(ids)}
onUndo={() => restoreFiles(ids)}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | The resting label content. |
icon | ReactNode | — | Icon displayed before label. |
prompt | ReactNode | — | Inline question shown when confirming. |
confirmLabel | string | "Delete" | Action confirm button text. |
cancelLabel | string | "Cancel" | Action cancel button text. |
pendingLabel | string | "Deleting" | Text shown during async execution. |
doneLabel | string | "Deleted" | Result text upon completion. |
undoLabel | string | "Undo" | Undo button label. |
tone | "danger" | "neutral" | "danger" | Visual tone (danger/neutral). |
onConfirm | () => void | Promise<unknown> | — | Handler called when confirmed. |
onUndo | () => void | Promise<unknown> | — | Handler called when undone. |
confirmTimeout | number | 6000 | Auto-dismiss timeout in ms. |
resultTimeout | number | 5000 | Result display timeout in ms. |
Built by Otis
Last updated: 10/12/2026