Alert dialog

Press Enter once it opens: focus is on Cancel.

Installation

npx shadcn@latest add @quireui/alert-dialog

Usage

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="danger" />}>Delete workspace</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogTitle>Delete this workspace?</AlertDialogTitle>
    <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
    <AlertDialogFooter>
      <AlertDialogCancel />
      <AlertDialogAction onClick={remove}>Delete workspace</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Why it differs from Dialog

Focus starts on Cancel, so pressing Enter right after it opens never confirms.
No outside click to close. It needs a deliberate answer.
The action is danger by default. Pass variant to change it.

For smaller, reversible confirms inside a page, the Button's built-in confirm step is lighter.

Accessibility

It is read as an alert dialog, and its title and description are read as it opens, so the question is heard before the buttons.

Key	Action
Enter / Space	Presses the focused button. Focus starts on Cancel, so Enter right after opening cancels.
Esc	Closes, the same as Cancel.
Tab / Shift+Tab	Moves between Cancel and the action. Focus stays inside the dialog.

API reference

AlertDialogTrigger

Also takes every prop of Base UI's AlertDialog.Trigger.

AlertDialogContent

Also takes every prop of Base UI's AlertDialog.Popup. Style it with [data-slot="alert-dialog"].

AlertDialog

Also takes every prop of Base UI's AlertDialog.Root.

AlertDialogTitle

Also takes every prop of Base UI's AlertDialog.Title.

AlertDialogDescription

Also takes every prop of Base UI's AlertDialog.Description.

AlertDialogFooter

Also takes every <div> attribute.

AlertDialogCancel

AlertDialogAction

Runs onClick, then closes. Danger by default, since that is what alert dialogs are for.