Overlays

Confirmation Dialog

Ergonomic AlertDialog wrapper for destructive actions with async confirm.

Import

tsx

import { ConfirmationDialog } from "@cooud-ui/ui";

bash

npx cooud-ui add confirmation-dialog

Examples

Basic

An ergonomic wrapper over AlertDialog for confirming an action. Pass a `trigger`, a `title`, and optional `description`; a custom `icon` fills the primary-tinted header badge.

tsx

<ConfirmationDialog
  trigger={<Button>Publish article</Button>}
  icon={<Rocket aria-hidden="true" />}
  title="Publish this article?"
  description="It becomes visible to everyone on your blog immediately. You can unpublish it again at any time."
  confirmLabel="Publish"
/>

Destructive

Set `destructive` to render a red confirm button and a warning-triangle badge — the pattern for irreversible actions like deleting an account.

tsx

<ConfirmationDialog
  destructive
  trigger={<Button variant="outline">Delete account</Button>}
  title="Delete your account?"
  description="This permanently deletes your account and everything in it. This action cannot be undone."
  confirmLabel="Delete account"
  cancelLabel="Cancel"
/>

Async confirm

When `onConfirm` returns a promise the confirm button shows a spinner and both actions lock until it settles — the dialog can’t be dismissed mid-flight. On reject it stays open and surfaces the error inline; on resolve it closes.

Confirm to see the pending spinner — the first attempt fails inline, the retry succeeds.

tsx

function ConfirmationDialogAsyncDemo() {
  const [open, setOpen] = useState(false);
  const attemptRef = useRef(0);
  const [deleted, setDeleted] = useState(false);

  return (
    <div className="flex flex-col items-center gap-3">
      <ConfirmationDialog
        open={open}
        onOpenChange={(next) => {
          if (next) {
            attemptRef.current = 0;
            setDeleted(false);
          }
          setOpen(next);
        }}
        destructive
        trigger={<Button variant="outline">Delete workspace</Button>}
        title="Delete this workspace?"
        description="This permanently removes 3 projects and 128 files. This action can’t be undone."
        confirmLabel="Delete workspace"
        cancelLabel="Keep workspace"
        onConfirm={() =>
          new Promise<void>((resolve, reject) => {
            attemptRef.current += 1;
            window.setTimeout(() => {
              if (attemptRef.current === 1) {
                reject(new Error("Couldn’t reach the server. Check your connection and try again."));
              } else {
                setDeleted(true);
                resolve();
              }
            }, 1400);
          })
        }
      />
      <p className="text-xs text-fg-tertiary">
        {deleted
          ? "Workspace deleted."
          : "Confirm to see the pending spinner — the first attempt fails inline, the retry succeeds."}
      </p>
    </div>
  );
}

API Reference

Generated from the component's exported types.

ConfirmationDialogProps

Extends Omit<ComponentPropsWithoutRef<typeof AlertDialogContent>, "title" | "children">

Prop	Type	Default	Description
`trigger`	`ReactNode`	—	Element that opens the dialog. Rendered inside an `AlertDialogTrigger asChild`, so a single focusable child (e.g. a `Button`) is expected. Omit when driving the dialog purely via `open`.
`title`*	`ReactNode`	—	Dialog heading — labels the dialog for assistive tech (rendered as `AlertDialogTitle`).
`description`	`ReactNode`	—	Supporting copy describing the consequence of the action (rendered as `AlertDialogDescription`).
`confirmLabel`	`ReactNode`	`"Confirm"`	Text for the confirm button.
`cancelLabel`	`ReactNode`	`"Cancel"`	Text for the cancel button.
`destructive`	`boolean`	`false`	Style the confirm button as a destructive (red) action and default the header icon to a warning triangle.
`icon`	`ReactNode`	—	Icon shown in the header badge. Defaults to a warning triangle when `destructive`, otherwise none. Pass `null` to force it off.
`onConfirm`	`() => void \| Promise<void>`	—	Invoked when the user confirms. If it returns a promise, the confirm button shows a spinner and is disabled until it settles; on resolve the dialog closes, on reject it stays open and surfaces the error message.
`open`	`boolean`	—	Controlled open state. Provide alongside `onOpenChange` to control the dialog externally.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called whenever the open state changes (opening, cancelling, or confirming). Dismissal is suppressed while a confirm promise is pending.