AlertDialog

Destructive-confirmation modal. No outside-click dismissal; requires explicit Action or Cancel.

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