Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Are you sure absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

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

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Show Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your
        account and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

API Reference

Prop	Type	Default	Description
open	boolean	—	Controlled open state of the dialog
onOpenChange	(open: boolean) => void	—	Callback when open state changes
defaultOpen	boolean	false	The open state when initially rendered

AlertDialogContent

The container for alert dialog content. Renders in a portal with an overlay.

AlertDialogHeader

Layout wrapper for AlertDialogTitle and AlertDialogDescription.

AlertDialogFooter

Layout wrapper for action buttons, aligned to the right on larger screens.

AlertDialogAction

A button that confirms the action and closes the dialog. Styled as a primary button by default.

AlertDialogCancel

A button that cancels and closes the dialog. Styled as an outline button by default.

Accessibility

The Alert Dialog component follows WAI-ARIA alertdialog patterns:

• Uses role="alertdialog" for screen reader announcements
• Focus is trapped within the dialog while open
• Escape key closes the dialog
• Content underneath is made inert (not interactive)
• Focus returns to trigger when closed
• Unlike Dialog, clicking outside does not close an Alert Dialog — the user must explicitly choose an action