Confirm dialog
A confirm dialog asks once, in a labelled modal, before an action that is hard to undo. It replaces window.confirm and prompt, which cannot be styled, labelled or tested.
Safe and destructive
A destructive dialog starts focus on Cancel and turns the confirm button red.
Nothing chosen yet
Show code
confirm({ title: "Delete flow", confirmLabel: "Delete flow", destructive: true })Nothing chosen yet
Show code
confirm({ title: "Publish flow", confirmLabel: "Publish flow" })When to use
- Use it for deletes, revokes, rotations and anything that stops something working.
- Title and button are verb and noun (Delete flow). Never OK, Yes or Are you sure.
- Say the consequence in one sentence. Use ask() with a reasonLabel when you need a reason.
- Do not confirm reversible changes: do them and offer Undo in a toast.
Delete flow: The flow and its steps are removed. [Cancel] [Delete flow]
Are you sure? [No] [Yes]
Import
import { useKbConfirm } from "@/components/ui/KbConfirmDialog";
const { confirm, confirmDialog } = useKbConfirm();
if (!(await confirm({ title: "Delete flow", description: "The flow and its steps are removed.", confirmLabel: "Delete flow", destructive: true }))) return;
// ...and render {confirmDialog} once in the componentProps
| Prop | Type | Default | What it does |
|---|---|---|---|
confirm(options) | Promise<boolean> | None | True on confirm; false on Cancel, Escape or backdrop. |
ask(options) | Promise<string | null> | None | Adds a reason box; resolves the reason or null. |
options | title, confirmLabel, description?, destructive?, cancelLabel?, reasonLabel?, reasonRequired? | None | Copy and variant. |
Keyboard and screen readers
- role=alertdialog with aria-modal, named by its title and described by its sentence.
- Focus moves in, Tab wraps inside, Escape cancels, and focus returns to the opener.
- Rendered in a portal so page styles and overflow cannot clip it.