Alert Dialog

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/alert-dialog.json

npx shadcn@latest add https://prototyper-ui.com/r/alert-dialog.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/alert-dialog.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/alert-dialog.json

This will add the following files to your project:

• components/ui/alert-dialog.tsx

Usage

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

<AlertDialog>
  <AlertDialogTrigger>Delete...</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Confirm</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Anatomy

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia />
      <AlertDialogTitle />
      <AlertDialogDescription />
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel />
      <AlertDialogAction />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Destructive

Use the variant="destructive" prop on AlertDialogAction to indicate a dangerous action.

Styling

Data Slots

Use data-slot attributes to target specific parts of the alert dialog:

Customization Examples

/* Custom overlay color */
[data-slot="alert-dialog-overlay"] {
  @apply bg-black/30;
}

/* Wider alert dialog */
[data-slot="alert-dialog-content"] {
  @apply sm:max-w-lg;
}

{/* Use the small size variant */}
<AlertDialogContent size="sm">
  {/* ... */}
</AlertDialogContent>

API Reference

AlertDialog

Root component that manages open/close state.

All Base UI AlertDialog.Root props are forwarded via ...props.

AlertDialogTrigger

Button that opens the alert dialog when clicked.

All Base UI AlertDialog.Trigger props are forwarded via ...props.

AlertDialogContent

The popup panel rendered inside a portal with an overlay backdrop.

All Base UI AlertDialog.Popup props are forwarded via ...props.

AlertDialogHeader

Container for media, title, and description. Layout adjusts based on the size prop on AlertDialogContent.

All standard div props are forwarded via ...props.

AlertDialogMedia

Container for an icon or illustration displayed in the header.

All standard div props are forwarded via ...props.

AlertDialogFooter

Container for action buttons. Uses a two-column grid at the sm size, and a row layout at default.

All standard div props are forwarded via ...props.

AlertDialogTitle

Accessible title for the alert dialog, rendered as a heading.

All Base UI AlertDialog.Title props are forwarded via ...props.

AlertDialogDescription

Accessible description rendered below the title.

All Base UI AlertDialog.Description props are forwarded via ...props.

AlertDialogAction

Confirm action button. Accepts all Button props including variant and size.

All Button props are forwarded via ...props.

AlertDialogCancel

Cancel button that closes the alert dialog when clicked. Renders as a Button with variant="outline" by default.

All Base UI AlertDialog.Close props are forwarded via ...props.

AlertDialogOverlay

Backdrop overlay behind the alert dialog.

All Base UI AlertDialog.Backdrop props are forwarded via ...props.

AlertDialogPortal

Renders children into a React portal.

All Base UI AlertDialog.Portal props are forwarded via ...props.

Accessibility

Unlike a regular Dialog, an Alert Dialog is intended for confirmations and destructive actions. It does not close when clicking outside or pressing Escape by default, ensuring the user must make an explicit choice.

Keyboard Interactions

ARIA Attributes

• AlertDialogContent receives role="alertdialog".
• aria-modal="true" is set automatically.
• aria-labelledby is automatically linked to AlertDialogTitle.
• aria-describedby is automatically linked to AlertDialogDescription.
• Focus is trapped inside the alert dialog while it is open.
• Focus returns to the trigger element when the alert dialog closes.

Related