Components

Alert Dialog

A modal that interrupts the user and asks for confirmation.

Installation

npx shadcn@latest add @blank/alert-dialog

Usage

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

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Reach for AlertDialog when the user must answer before continuing. Clicking outside does not close it. For anything else use Dialog.

Examples

With media

AlertDialogMedia puts an icon beside the title on wide screens and above it on narrow ones. AlertDialogAction takes Button's variant, so a destructive confirm is one prop.

Small

size="sm" centers the text and splits the footer into two equal buttons. Use it for one-line confirmations.