Shadcn Alert Dialog

An alert dialog stops the page and asks for a yes or no. Use it when the next click deletes data, spends money, or otherwise cannot be undone. If they need to type something, that is a Dialog.

Usage

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

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Remove Accordion
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Remove accordion.tsx?</AlertDialogTitle>
      <AlertDialogDescription>
        This deletes components/ui/accordion.tsx. Add it again with npx
        shadcn@latest add https://www.shadcn.io/r/accordion.json.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Remove</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Put render={<Button />} on the trigger so the Button is the actual control. AlertDialogTitle is required — screen readers announce it when the overlay opens.

Composition

Basic

Title, description, cancel, continue. Same keyboard model as the first demo.

Small

size="sm" on AlertDialogContent for a short confirm — connect a device, allow a permission.

Media

AlertDialogMedia sits above the title. Use it when the action needs a symbol, not more words.

Small with Media

size="sm" plus AlertDialogMedia. Permission prompts and hardware connects.

Destructive

variant="destructive" on the action, and say what actually disappears. Cancel stays the quiet button.

RTL

Wrap with DirectionProvider and dir="rtl". Footer buttons follow the reading direction.

API

AlertDialogContent

AlertDialogAction and AlertDialogCancel take the same variant and size as Button.

Keyboard

Focus stays in the overlay until it closes. Title and description are announced.

Notes

Name the thing you are about to destroy. After it succeeds, a Sonner toast is enough.

With other components

Questions

Related