AlertDialog

A modal dialog that interrupts the user with important content and expects a response. Unlike Dialog, AlertDialog does NOT dismiss on backdrop click or Escape — the user must explicitly choose an action.

Use cases

• Destructive confirmations — "Delete this item? This cannot be undone."
• Irreversible actions — submitting a form, publishing content, sending a message.
• Critical warnings — session expiry, unsaved changes, data loss.

When NOT to use

• For non-blocking information — use Dialog or Toast.
• For inline confirmations — use an inline confirmation pattern.
• For simple notifications — use Alert.

Import

import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from '@mihcm/ui/AlertDialog';

Basic usage

const [open, setOpen] = useState(false);
 
<AlertDialog open={open} onOpenChange={setOpen}>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel onClick={() => setOpen(false)}>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Composition

• AlertDialogCancel maps to the safe exit. AlertDialogAction maps to the confirming action.
• For destructive actions, use variant="destructive" on the Action button.
• Unlike Dialog, outside click and Escape do NOT dismiss — the user must pick Cancel or the action.
• AlertDialogTitle and AlertDialogDescription are required for screen reader announcements.
• AlertDialogContent applies an automatic gap-y-4 row gap between its direct children (Header / Body / Footer). You never need to add mt-* / mb-* between sections.
• Use AlertDialogBody whenever the alert needs custom middle content — confirmation input, checkbox, extra explanation. It provides matching px-6 horizontal padding so the body lines up with Header and Footer; vertical spacing comes from the parent's gap. See the Confirmation input example.

Related

• Dialog — dismissable modal for non-critical content.
• Toast — transient notification after an action.
• Alert — inline non-blocking message.