Confirm Dialog

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { useState } from 'react';
import { Button, ConfirmDialog } from '@krackedui/motion';

export function DeletePages() {
  const [count, setCount] = useState(3);
  return (
    <ConfirmDialog
      trigger={<Button variant="danger">Delete {count} pages…</Button>}
      title={`Delete ${count} pages?`}
      description="They move to Trash for 30 days."
      confirmLabel="Delete"
      destructive
      // Returning a Promise keeps the dialog open with a busy button until it settles.
      onConfirm={() => new Promise<void>((resolve) => setTimeout(() => { setCount((c) => Math.max(0, c - 1)); resolve(); }, 1200))}
    />
  );
}

Examples

Destructive, async

Controlled, non-destructive

Static body

API Reference

ConfirmDialog

ConfirmDialogBody

The 300px body on its own (inside Dialog.Content or DialogSurface).

Accessibility

• Follows the WAI-ARIA alertdialog pattern: role="alertdialog", named by the title, described by the description.
• Focus starts on Cancel, so pressing Enter right away never confirms by accident; focus is trapped inside.
• Escape and Cancel dismiss it; focus returns to the trigger.
• While an async onConfirm runs, the confirm button has aria-busy="true" and the dialog cannot be dismissed. A rejected Promise keeps it open so the user can retry.
• Opens and closes with the shared motion layer (styles/motion.css); with prefers-reduced-motion: reduce it only fades.

Usage

• Use before destructive or irreversible actions (delete, revoke, publish).
• Write the confirm label as the action ("Delete"), not "OK" or "Yes".
• Don't confirm routine, undoable actions: do them and offer Undo in a toast instead.