Alert dialog

A dialog that requires a user response to proceed.

Preview

Installation

Install the local ghost-kit source bundle while the registry runs at localhost:3110. It contains this component and its source dependencies. Prepare the local registry first so token dependencies also resolve locally.

Install

npx shadcn@latest add http://localhost:3110/r/ghost-kit.json

Basic usage

123456import { AlertDialog } from "@/components/ui/alert-dialog";

<AlertDialog.Root>
  <AlertDialog.Trigger>Delete</AlertDialog.Trigger>
  <AlertDialog.Portal><AlertDialog.Popup><AlertDialog.Title>Delete item?</AlertDialog.Title><AlertDialog.Close>Cancel</AlertDialog.Close></AlertDialog.Popup></AlertDialog.Portal>
</AlertDialog.Root>

Structure

Examples

The Preview above is the canonical alert-dialog example. Compose it with the public parts shown in Structure.

API reference

For inherited behavior and additional part properties, see the Base UI Alert Dialog API.

AlertDialog.Root properties
Prop	Type	Default	Description
`onOpenChange`	`((open: boolean, eventDetails: AlertDialog.Root.ChangeEventDetails) => void)`		Event handler called when the alert dialog is opened or closed.
`actionsRef`	`RefObject<DialogRootActions \| 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.
`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.
`children`	`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.
`open`	`boolean`		Whether the dialog is currently open.
`defaultOpen`	`boolean`	`false`	Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.
`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).
`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.