Alert dialog

A modal confirmation that interrupts the user before an irreversible or costly action and requires an explicit answer.

npx prodular-ui add alert-dialog

Destructive

Say what will be lost, with numbers, and repeat the action on the button.

import { Trash2Icon } from "lucide-react"
import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogMedia,  AlertDialogTitle,  AlertDialogTrigger,} from "@/components/ui/alert-dialog"import { Button } from "@/components/ui/button"
export default function AlertDialogDestructive() {  return (    <AlertDialog>      <AlertDialogTrigger render={<Button variant="destructive-subtle" />}>        Delete project      </AlertDialogTrigger>      <AlertDialogContent>        <AlertDialogHeader>          <AlertDialogMedia variant="destructive">            <Trash2Icon />          </AlertDialogMedia>          <AlertDialogTitle>Delete Billing migration?</AlertDialogTitle>          <AlertDialogDescription>            This removes the project, its 148 issues and every attached file for all members.            You cannot undo this.          </AlertDialogDescription>        </AlertDialogHeader>        <AlertDialogFooter>          <AlertDialogCancel>Keep project</AlertDialogCancel>          <AlertDialogAction variant="destructive">Delete project</AlertDialogAction>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  )}

Small

size sm centers the content and splits the footer into two equal buttons.

import { FileWarningIcon } from "lucide-react"
import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogMedia,  AlertDialogTitle,  AlertDialogTrigger,} from "@/components/ui/alert-dialog"import { Button } from "@/components/ui/button"
export default function AlertDialogSmall() {  return (    <AlertDialog>      <AlertDialogTrigger render={<Button variant="outline" />}>Close editor</AlertDialogTrigger>      <AlertDialogContent size="sm">        <AlertDialogHeader>          <AlertDialogMedia variant="warning">            <FileWarningIcon />          </AlertDialogMedia>          <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>          <AlertDialogDescription>Your edits to the reply draft will be lost.</AlertDialogDescription>        </AlertDialogHeader>        <AlertDialogFooter>          <AlertDialogCancel>Keep editing</AlertDialogCancel>          <AlertDialogAction>Discard</AlertDialogAction>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  )}

Anatomy

<AlertDialog>  <AlertDialogTrigger render={<Button variant="destructive-subtle" />}>Delete project</AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogMedia variant="destructive"><Trash2Icon /></AlertDialogMedia>      <AlertDialogTitle>Delete Billing migration?</AlertDialogTitle>      <AlertDialogDescription>This removes 148 issues. You cannot undo this.</AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter>      <AlertDialogCancel>Keep project</AlertDialogCancel>      <AlertDialogAction variant="destructive">Delete project</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialog>

Guidance

Use it when

Use before deleting, revoking access, cancelling a subscription or discarding unsaved work.
Name the object and the consequence in the title: Delete Billing migration?
Use AlertDialogMedia with a status variant to make the stakes visible at a glance.

Avoid

Routine confirmations the user makes many times a day. Offer undo in a toast instead.
Forms or extra content. Use Dialog.
Generic buttons like OK and Yes. Both buttons should say what they do.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Always include AlertDialogTitle and AlertDialogDescription. The description is read to screen readers when the dialog opens.
Label the confirm button with the action (Delete project) and the cancel button with the safe outcome (Keep project).
Use AlertDialogAction variant="destructive" only when data is lost. Otherwise keep the default variant.
Match AlertDialogMedia variant to the action: destructive for deletion, warning for data loss that can be recovered, info for neutral checks.
Close it yourself after the action succeeds, by controlling open. AlertDialogAction does not close on its own.

API

AlertDialogContent

Prop	Type	Default	Description
size	"default" \| "sm"	"default"	sm is narrow and centered, with a two column footer.

AlertDialogMedia

Prop	Type	Default	Description
variant	"default" \| "destructive" \| "warning" \| "info" \| "success"	"default"	Tint of the icon tile.

AlertDialogAction

Prop	Type	Default	Description
variant	Button variant	"default"	Usually destructive for the confirm button.

AlertDialogCancel

Prop	Type	Default	Description
variant	Button variant	"outline"	Closes the dialog.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add alert-dialog# or, with the registry in components.jsonnpx shadcn@latest add @prodular/alert-dialog