Alert Dialog

Confirmation dialog for destructive or high-stakes actions.

Installation

npx shadcn@latest add @iconiq/r-alert-dialog

Props

AlertDialog

Provider-switchable destructive-confirmation surface with the same product-facing API on both Base UI and Radix UI.

openboolean

Optional controlled open state for the dialog root.

defaultOpenboolean

Default false

Uncontrolled initial state for the dialog root when you want the component to manage its own visibility.

onOpenChange(open: boolean) => void

Called whenever the open state changes, regardless of which provider is installed underneath.

Current install target: Radix UI.

Dependencies declared by this registry entry: @radix-ui/react-alert-dialog, motion.

Installs a Radix alert dialog with the same higher-level trigger, content, action, and cancel API as the Base UI version.

Uses Motion-driven overlay fade, spring card entry, and staggered inner sections for the confirm flow.

The generated registry file is /r/r-alert-dialog.json.

Exports

Both registry entries ship the same higher-level parts so you can keep one alert-dialog composition style while swapping the headless library below it.

AlertDialogTriggerButtonHTMLAttributes<HTMLButtonElement>

Default trigger button with the section’s rounded, motion-aware action styling baked in.

AlertDialogContentHTMLAttributes<HTMLDivElement>

Visible dialog card wrapper. className is merged onto the animated surface rather than the outer viewport container.

AlertDialogTitleHTMLAttributes<HTMLHeadingElement>

Heading slot linked to the dialog semantics on both providers.

AlertDialogDescriptionHTMLAttributes<HTMLParagraphElement>

Body copy slot for irreversible-action context and consequences.

AlertDialogCancel / AlertDialogActionButtonHTMLAttributes<HTMLButtonElement>

Pre-styled action row buttons for the safe path and the destructive confirm path.