ConfirmDialog

Usage examples

import { Button, ConfirmDialog } from '@rookcom/monarch-react';

const wait = (ms: number) => new Promise<void>((resolve) => window.setTimeout(resolve, ms));

function DeclineRequest() {
  return (
    <ConfirmDialog
      trigger={<Button>Decline request</Button>}
      title="Decline this access request?"
      description="The requester is told by email."
      reason={{
        label: 'Reason',
        description: 'Shown to the requester.',
        required: true,
        placeholder: 'For example: use the shared team account instead',
      }}
      confirmLabel="Decline request"
      onConfirm={() => wait(800)}
    />
  );
}

<DeclineRequest />

import { Button, ConfirmDialog } from '@rookcom/monarch-react';

const wait = (ms: number) => new Promise<void>((resolve) => window.setTimeout(resolve, ms));

function RevokeWithError() {
  return (
    <ConfirmDialog
      trigger={<Button>Revoke key</Button>}
      tone="danger"
      title="Revoke this API key?"
      description="Requests signed with it start failing straight away."
      confirmLabel="Revoke key"
      onConfirm={async () => {
        await wait(800);
        throw new Error('The key is in use by a running export. Try again when it finishes.');
      }}
    />
  );
}

<RevokeWithError />

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, useConfirm } from '@rookcom/monarch-react';

// MoreIcon, TrashIcon: demo icons from the docs site; use your own.

const wait = (ms: number) => new Promise<void>((resolve) => window.setTimeout(resolve, ms));

function RowActions() {
  const { confirm, element } = useConfirm();
  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button trailingIcon={<MoreIcon />}>Note actions</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Pin</DropdownMenuItem>
          <DropdownMenuItem
            tone="danger"
            icon={<TrashIcon />}
            onSelect={async () => {
              const result = await confirm({
                tone: 'danger',
                title: 'Delete this note?',
                description: 'It is removed for everyone on the account.',
                confirmLabel: 'Delete note',
                onConfirm: () => wait(600),
              });
              if (result) {
                // The note is deleted; update the list here.
              }
            }}
          >
            Delete
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      {element}
    </>
  );
}

<RowActions />

Purpose

Asks the person to confirm an action before it happens, says plainly what will change, and stays open while the action runs so a failure can be shown and retried. It replaces window.confirm and window.prompt, which cannot be themed, translated or show progress.

Design principles

• Say what happens, not "Are you sure?": the title asks the question, the description and consequences say what changes.
• Name the button after the action ("Delete project"), never "OK" or "Yes".
• Safe by default: focus starts on Cancel, the least destructive action; outside clicks do not dismiss it; Enter in a field never confirms a mismatched phrase.
• Honest progress: while the action runs nothing dismisses the dialog, and a failure is shown in place with the reason and a chance to retry.
• The danger tone is reserved for destructive actions: a red confirm button and a calm warning icon, nothing more.

API reference

import { ConfirmDialog, useConfirm } from '@rookcom/monarch-react';

ConfirmDialog is controlled (open + onOpenChange) or uncontrolled (trigger, defaultOpen). It forwards its ref to the dialog element.

onConfirm(details) runs the action. Return a promise for the pending state; reject (or throw) to show an error and keep the dialog open.

useConfirm() returns { confirm, element }: render element once and await confirm(options), which resolves with { reason? } or null when cancelled.

Other DialogContent props (className, onEscapeKeyDown, data-*, …) pass through to the dialog.

Generated from the TypeScript declarations of packages/react/src/components/overlays/confirm-dialog.

Properties

reason is { label, description?, placeholder?, required?, maxLength?, requiredMessage? }; the trimmed text arrives as details.reason.

pending and error can be controlled when the product tracks the mutation itself.

Every visible string is a prop (confirmLabel, cancelLabel, confirmPhraseLabel, confirmPhraseMismatch, errorMessage, reason.requiredMessage) for translation.

Variants

States

Interaction behaviour

• Opening focuses Cancel (initialFocus="cancel"), or the phrase or reason field with initialFocus="field".
• Confirming calls onConfirm. A synchronous action closes the dialog at once; a promise keeps it pending until it settles.
• On success it closes (unless closeOnConfirm={false}); on failure it stays open with the error and the confirm button ready to retry.
• Escape and Cancel call onCancel and close it, except while pending.
• Every opening starts clean: typed phrase, reason and old errors are cleared.
• From a DropdownMenu item, call confirm() from useConfirm in onSelect; focus returns to the menu trigger afterwards.

Keyboard support

Accessibility

Role

alertdialog (aria-modal)

Accessible name

title; description becomes the accessible description.

• Initial focus is on the least destructive action (APG alert dialog pattern).
• The phrase field is labelled with the exact phrase and has autocomplete, autocorrect and spellcheck off.
• Field errors are announced politely and linked to the field; an action error is announced assertively (role="alert").
• The pending confirm button keeps focus and sets aria-busy, so keyboard users do not lose their place.
• The warning icon is decorative (aria-hidden); the title carries the meaning.

Responsive behaviour

• Default width 24rem (sm), never wider than the screen minus 2rem.
• The footer wraps its buttons on narrow screens; long phrases wrap inside the label.
• Long consequence lists scroll inside the body while the actions stay visible.

Theme support

• Dialog surface tokens, danger tokens for the icon and button, and the muted surface behind the phrase.
• Light, dark and more-contrast themes apply automatically; motion follows prefers-reduced-motion.

Do and don't

Related components

• Dialog: The base it is built on, for custom content.
• DropdownMenu: Destructive menu items that open a confirmation.
• Toast: Undo for reversible actions instead of a confirmation.
• Alert: Shows the error inside the dialog.

Dependencies

Testing coverage

• Opens as an alertdialog with focus on Cancel; axe passes; Escape cancels (onCancel) and restores focus.
• Keeps focus inside and ignores outside clicks.
• Confirms a synchronous action and closes.
• Type-to-confirm: blocked until the exact phrase; Enter with a mismatch marks the field invalid and describes the error; surrounding spaces are ignored.
• Async: pending sets aria-busy, keeps focus on the confirm button, disables Cancel and blocks Escape; success closes.
• Async: a rejection shows the error, links it to the confirm button, keeps it open and allows retry.
• Generic message for non-Error rejections; errorMessage maps errors; a synchronous throw is shown too.
• Required reason blocks until filled and is passed trimmed; an empty optional reason is omitted.
• Consequences render as a list; children come before the fields.
• Controlled pending and error; controlled open with closeOnConfirm={false}.
• Starts clean on every opening.
• useConfirm resolves with the details on confirm and null on cancel, and runs async work inside the dialog first.
• useConfirm from a DropdownMenu item: focus lands on Cancel, and returns to the menu trigger after closing.
• Renders on the server (closed and open).

Tests: packages/react/src/components/overlays/confirm-dialog