Alert Dialog

The dialog's panel for a choice that must be made: no close button and no dismissing by clicking away, only the answers it offers.

Full screen

01Preview

02Installation

npx shadcn@latest add https://aiellie.app/r/alert-dialog.json

03API reference

From the Base UI documentation

Groups all parts of the alert dialog. Doesn't render its own HTML element.

Props

Prop	Type	Default	Description
defaultOpen	boolean	false	Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.
open	boolean	-	Whether the dialog is currently open.
onOpenChange	((open: boolean, eventDetails: AlertDialog.Root.ChangeEventDetails) => void)	-	Event handler called when the alert dialog is opened or closed.
actionsRef	React.RefObject<AlertDialog.Root.Actions \| null>	-	A ref to imperative actions. `unmount`: Manually unmounts the alert dialog. Call this after any externally controlled closing animation finishes.`close`: Closes the alert dialog imperatively when called.
defaultTriggerId	string \| null	-	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
handle	AlertDialog.Handle<Payload>	-	A handle to associate the alert dialog with a trigger. If specified, allows external triggers to control the alert dialog's open state. Can be created with the AlertDialog.createHandle() method.
onOpenChangeComplete	((open: boolean) => void)	-	Event handler called after any animations complete when the dialog is opened or closed.
triggerId	string \| null	-	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the dialog is uncontrolled (that is, when the `open` prop is not set).
children	React.ReactNode \| PayloadChildRenderFunction<Payload>	-	The content of the dialog. This can be a regular React node or a render function that receives the `payload` of the active trigger.