Alert dialog

Alert dialog interrupts with a question the person has to answer, like applying a look or deleting one. It is centered like Dialog, but it has no close button, ignores clicks on the page behind it, and puts focus on Cancel, so the only ways out are Cancel, the action, and Escape. Its action and cancel are kit Buttons.

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Like Dialog, the content is 448px wide, keeps 16px from each edge of a narrower screen, and scrolls inside when it is taller than the screen.

Cancel is the safe default

Focus lands on AlertDialogCancel when the dialog opens, so pressing Enter or Space right away backs out instead of confirming. Make the safe choice Cancel and give the action a label that names what it does, like "Delete" or "Apply", rather than "OK". Use the destructive variant on the action when it deletes something or cannot be undone, and leave it as the default when it only commits a change.

The action closes the dialog

AlertDialogAction and AlertDialogCancel both close the dialog when clicked, and they take the Button props, so put your handler in onClick. The action does not wait for anything, so a request that can fail or take a while belongs in Confirm, which holds the dialog open with a pending verb until the work settles.

Props

Alert dialog takes the props of the Radix Alert Dialog it is built on, including open, defaultOpen, and onOpenChange. The content takes className and has no close button to switch off.

Both buttons accept every other Button prop, such as iconBefore and loading.

Accessibility

• AlertDialogContent has role="alertdialog". aria-labelledby points at AlertDialogTitle and aria-describedby at AlertDialogDescription, each only while it is rendered. A dialog with no title has no accessible name, and this version of Radix does not warn about it.
• Focus goes to AlertDialogCancel on open. Tab and Shift+Tab loop inside the dialog.
• Escape closes it. A click on the page behind does not, because Radix cancels outside pointer and focus events for an alert dialog.
• On close, focus returns to the AlertDialogTrigger. Without one, focus is not returned.
• While it is open the page behind is hidden from assistive technology with aria-hidden, does not take clicks, and does not scroll.
• The buttons are native buttons with a 2px :focus-visible ring, and they are at least 44px tall on a touch screen.
• The enter and exit are a fade on the scrim and a fade-and-scale on the content over the base duration, and reduced motion drops both so the dialog appears at once.
• The kit adds no rules for forced colors to the scrim or the content, and has not been checked in Windows high contrast. The content keeps its border, which the system paints.

When to use something else

• Confirm for the same question with a trigger, a verb, and a pending state, so the dialog stays open while the action runs.
• Dialog for anything that is not a question, like a form or a detail, and for anything the person may dismiss with the corner button or a click outside.
• Sheet and Drawer for panels and bottom sheets. They hold content, and are not for interrupting.

Install

shadcn add @gesso/alert-dialog