AlertDialog

Blocking confirmation modal for irreversible or high-stakes actions (delete, discard, sign out). Unlike Dialog, it cannot be dismissed by clicking outside or pressing the ✕ — the user must explicitly choose AlertDialogAction or AlertDialogCancel. Reach for a Dialog instead for non-destructive, multi-field tasks, or a Toast for reversible actions with undo. Action renders a primary Button (set tone="destructive" when the outcome is destructive); Cancel renders an outline Button. The density prop on AlertDialogContent sets spacing: comfortable (default) for standalone confirmations, compact for dense or embedded surfaces.

Default

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline" tone="destructive">Delete account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This will permanently delete your account and all associated data.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Props

ComponentNotable props
AlertDialogopen, defaultOpen, onOpenChange
AlertDialogTriggerasChild
AlertDialogContentdensity: "comfortable" (default) | "compact" — shell 20/12, section 16/8, header gap 8/4. Plus onEscapeKeyDown (pointer-outside is blocked by Radix).
AlertDialogActionRenders a Button variant="primary". Pass `onClick` to run the action
AlertDialogCancelRenders a Button variant="outline". Closes without firing

Source

packages/react/src/components/alert-dialog.tsx · Figma 2814:11168