Alert Dialog

A Radix AlertDialog — for confirmations that need an explicit choice (delete, discard, ...). Unlike Dialog, it can't be dismissed by clicking outside or pressing Esc.

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@pompeitech/vesuvius-ui";

Default

API

AlertDialog

AlertDialogTrigger — every native <button> prop, plus asChild (boolean, default false) to render on a single child instead of a <button> (as with the destructive Button above).

AlertDialogContent — every native <div> prop. Rendered in a Portal; focus is trapped inside it while open, and returns to the trigger on close.

AlertDialogHeader / AlertDialogFooter — plain layout <div>s, no custom props (header stacks text top-to-bottom, footer right-aligns its buttons on desktop and stacks them full-width on mobile).

AlertDialogTitle — every native heading-adjacent prop; required — provides the dialog's accessible name.

AlertDialogDescription — every native <p> prop; provides the dialog's accessible description.

AlertDialogCancel — every native <button> prop, plus asChild. Closes the dialog without firing any confirmation logic.

AlertDialogAction — every native <button> prop, plus asChild. Does not close the dialog automatically — wire your own confirm handler (e.g. onClick) to perform the action and close it yourself, since an async action (a delete request) may need to stay open until it resolves.

Accessibility

Renders with role="alertdialog" (not role="dialog") — screen readers announce it more assertively, appropriate for a choice the user must make. Deliberately does not close on outside click or Esc, unlike Dialog; use it only when the user must make an explicit choice, not for dismissible content.