ShadcnStore

Appearance

Shadcn Alert Dialog ​

The shadcn/ui Alert Dialog is a modal for confirmations that need an explicit choice, styled with Tailwind CSS v4. Built on Base UI, it traps focus and, unlike a regular dialog, does not close on an outside click. Alert dialogs guard destructive actions across ShadcnStore blocks.

Key features ​

  • Interrupting confirmation with explicit cancel and action buttons.
  • Does not dismiss on outside click; Escape still cancels.
  • Focus trap and return-focus to the trigger.
  • Composable Header, Title, Description, and Footer.

Installation ​

bash
npx shadcn@latest add alert-dialog

Usage ​

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

export function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline" />}>Delete</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={() => {}}>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Composition ​

Use the render prop on AlertDialogTrigger to compose with a Button:

tsx
<AlertDialogTrigger render={<Button variant="outline" />}>Delete</AlertDialogTrigger>

Accessibility ​

  • Always include a Title and Description so the modal is announced with its purpose.
  • Keep the confirm and cancel actions clearly labelled; avoid ambiguous "OK".
  • Because it blocks the page, reserve it for consequential choices, not routine ones.

When to use the Alert Dialog ​

Use an Alert Dialog for a decision the user must confirm or cancel before continuing: deleting data, discarding changes, or leaving a paid flow. For non-blocking modals and forms, use a Dialog. For a transient message, use a Toast or Alert.

Used in these blocks ​

An Alert Dialog is opened by a Button and shares primitives with the Dialog. For non-blocking anchored content use a Popover.

FAQ ​

What is the shadcn alert dialog used for? ​

The Alert Dialog is a modal for confirmations that require an explicit choice, such as confirming a delete. It cannot be dismissed by clicking outside.

What is the difference between Alert Dialog and Dialog? ​

Alert Dialog interrupts and requires an action (cancel or continue) and ignores outside clicks. Dialog is a general modal that can be dismissed by clicking outside or pressing Escape.

How do I run an action on confirm? ​

Attach your handler to AlertDialogAction's onClick; AlertDialogCancel closes without acting.

Can I make the confirm button destructive? ​

Yes. Apply the destructive button styles to AlertDialogAction for delete-style confirmations.

Copyright © 2025-2026 ShadcnStore