Alert Dialog

Modal confirmation for destructive actions.

Default

Use for destructive or non-dismissable confirmations. role="alertdialog" and no backdrop-click-to-close distinguish it from Dialog.

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="destructive">Delete account</Button>} />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This permanently deletes your account and all associated data.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel render={<Button variant="outline">Cancel</Button>} />
      <AlertDialogAction render={<Button variant="destructive">Delete</Button>} />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>