Overlays & Tooltips

Confirmation Dialog

Ergonomic AlertDialog wrapper for destructive actions with async confirm.

Import

tsx

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

bash

npx cronus-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>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ConfirmationDialogDefault layout:inline style:confirmation-dialog {
  label "Delete project"
}

page "/audit/confirmation-dialog/default" type:custom {
  use ConfirmationDialogDefault
}

API Reference

Generated from the component's exported types.