Alert Dialog

A pink confirmation dialog for destructive or irreversible actions.

Installation

npx shadcn@latest add @afterglow/alert-dialog

Composition

Component structure.

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

API Reference

There is no close button and no dismiss on the backdrop. An alert dialog is a question, and the two answers are the two buttons.

AlertDialogAction

Both of these close the dialog. Only the drawing separates them, so whichever one is destructive has to be the one that looks it.

Everything else is Base UI alert dialog's API, documented there.