Alert Dialog

A danger-zone row whose Delete button opens a confirmation that names the project and runs the deletion while it waits.

A confirmation whose work rejects, so the dialog stays open and shows the error.

If the promise rejects, the dialog stays open, the confirm button settles back, and the error's message appears as an alert above the actions, beside the choice that caused it. The typed challenge is kept, so trying again takes one press. The phrase and the error clear when the dialog closes.

Deleting a project: the consequences with counts, the phrase in a copyable chip, and a confirm that stays disabled until it is typed exactly.

Pass challenge for a high-impact delete of a named thing (a project, workspace, repository or account). The phrase shows in a chip with a copy button; the field arms the danger button only on an exact match, case-sensitive, ignoring spaces at either end. Pasting is allowed. Enter does nothing until it matches. consequences lists what will be lost, with counts, so the person reads what they are about to do.

<ConfirmDialog
  open={open}
  onOpenChange={setOpen}
  destructive
  title="Delete acme/orion?"
  consequences={['12 deployments and their logs', '3 custom domains', 'Access for 7 members']}
  confirmLabel="Delete project"
  challenge="acme/orion"
  onConfirm={() => deleteProject(id)}
/>

An async delete whose first attempt fails: the dialog stays open with the reason and the typed phrase, and the second attempt lands.

The plain tier: no challenge, so no typing. Focus starts on Cancel. Use it where the action is serious but narrow.

Alert dialogs built from the parts, in the default and sm sizes.

AlertDialogContent comes in two sizes. The default puts an AlertDialogMedia badge beside the title and the actions in a band along the bottom. size="sm" centers a short question over two equal buttons. AlertDialogCancel closes the dialog and is an outline button by default. AlertDialogAction is a Button and doesn't close anything by itself, so close the dialog from its handler.

A confirm button that runs its own action and plays the whole lifecycle on the button.

Because AlertDialogAction is a Button that becomes an Async Button when you pass onAction or status, it takes onAction, and the action's whole lifecycle plays on the button itself. The label morphs to a spinner and pendingLabel, then to a drawn check and successLabel, or shakes to a cross and errorLabel. Close the dialog once success has shown. After an error, keep it open so the person can try again. Flip the switch in the preview to see the failure path.

<AlertDialog
  open={open}
  // The dialog can't be dismissed while the work runs.
  onOpenChange={(next) => state !== 'pending' && setOpen(next)}
>
  …
  <AlertDialogAction
    onAction={rollBack}
    pendingLabel="Rolling back…"
    successLabel="Rolled back"
    errorLabel="Rollback failed"
    onActionStateChange={(next) => {
      if (next === 'idle' && state === 'success') setOpen(false)
      setState(next)
    }}
  >
    Roll back to 3f9c2a1
  </AlertDialogAction>
</AlertDialog>

Reach for ConfirmDialog first. It holds the dialog through the work and shows failures as text, which suits most confirmations. onAction suits a dialog where the result belongs on the button.