BlankUI

overlay

Alert Dialog

A confirmation the user must answer, for destructive or important actions. Clicking outside does not close it.

npx blankui add alert-dialog
Raw markdown for agentsRegistry JSON

When to use

  • Confirming a delete or another action that cannot be undone.
  • Warning about losing unsaved changes.

Use something else when

  • A task with form fields. Use dialog.
  • The action can be undone easily. Use toast.

title and description are both required. Cancel gets focus when it opens, so pressing Enter by accident does not confirm.

Import

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

Example

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete project</Button>
  </AlertDialogTrigger>
  <AlertDialogContent
    title="Delete this project?"
    description="All files and settings will be removed. This cannot be undone."
  >
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction destructive onClick={deleteProject}>
        Delete
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Mistakes to avoid

AvoidInstead
window.confirm('Are you sure?')<AlertDialog>
<AlertDialogAction className="bg-destructive"><AlertDialogAction destructive>
A vague title like "Are you sure?"Name the action: "Delete this project?"

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/alert-dialog.json