Alert Dialog

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

Demo

Usage

Import the parts you need from the component's folder.

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from "@/components/ui/alert-dialog";

Basic

Small

Set size="sm" on AlertDialogContent for a compact dialog.

Media

AlertDialogMedia renders an icon or image alongside the header.

Small with Media

Destructive

Pass variant to AlertDialogAction and AlertDialogCancel for destructive confirmations.

API Reference

AlertDialogContent

Prop	Type	Default	Description
`size`	`"default" \| "sm"`	`"default"`	Dialog size. sm centers content and stacks the footer in a 2-col grid.

AlertDialogAction / AlertDialogCancel

Prop	Type	Default	Description
`variant`	`ButtonVariants["variant"]`	`default / "outline"`	Button style, e.g. destructive.
`size`	`ButtonVariants["size"]`	`"default"`	Button size.

AlertDialogMedia

Prop	Type	Default	Description
`class`	`string`	—	Container for an icon or image in the header.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Esc`	Closes the dialog (returns focus to the trigger).
`Tab`	Focus is trapped inside the dialog while open.

Unlike Dialog, clicking outside does not close an alert dialog; the user must choose an action.

TipTap Editor Command