---
title: Alert Dialog
subtitle: A dialog that requires a user response to proceed.
description: A high-quality, unstyled React alert dialog component that requires a user response to proceed.
---
# Alert Dialog
A high-quality, unstyled React alert dialog component that requires a user response to proceed.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
import { AlertDialog } from '@base-ui/react/alert-dialog';
export default function ExampleAlertDialog() {
return (
Discard draft
Discard draft?
You can’t undo this action.
);
}
```
## Anatomy
Import the component and assemble its parts:
```jsx title="Anatomy"
import { AlertDialog } from '@base-ui/react/alert-dialog';
;
```
## Examples
### Open from a menu
In order to open a dialog using a menu, control the dialog state and open it imperatively using the `onClick` handler on the menu item.
```tsx {12-13,17-18,24-25,28-29} title="Connecting a dialog to a menu"
import * as React from 'react';
import { AlertDialog } from '@base-ui/react/alert-dialog';
import { Menu } from '@base-ui/react/menu';
function ExampleMenu() {
const [dialogOpen, setDialogOpen] = React.useState(false);
return (
Open menu
{/* Open the dialog when the menu item is clicked */}
setDialogOpen(true)}>Open dialog
{/* Control the dialog state */}
{/* prettier-ignore */}
{/* Rest of the dialog */}
);
}
```
### Close confirmation
This example shows a nested confirmation dialog that opens if the text entered in the parent dialog is going to be discarded.
To implement this, both dialogs should be controlled. The confirmation dialog may be opened when `onOpenChange` callback of the parent dialog receives a request to close. This way, the confirmation is automatically shown when the user clicks the backdrop, presses the Esc key, or clicks a close button.
Use the `[data-nested-dialog-open]` selector and the `var(--nested-dialogs)` CSS variable to customize the styling of the parent dialog. Backdrops of the child dialogs won't be rendered so that you can present the parent dialog in a clean way behind the one on top of it.
import { DemoDialogCloseConfirmation } from '../dialog/demos/close-confirmation';
### Detached triggers
An alert dialog can be controlled by a trigger located either inside or outside the `` component.
For simple, one-off interactions, place the `` inside ``, as shown in the example at the top of this page.
However, if defining the alert dialog's content next to its trigger is not practical, you can use a detached trigger.
This involves placing the `` outside of `` and linking them with a `handle` created by the `AlertDialog.createHandle()` function.
```jsx title="Detached triggers" {3,5} "handle={demoAlertDialog}"
const demoAlertDialog = AlertDialog.createHandle();
Open
...
```
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { AlertDialog } from '@base-ui/react/alert-dialog';
const demoAlertDialog = AlertDialog.createHandle();
export default function AlertDialogDetachedTriggersSimpleDemo() {
return (
Discard draft
Discard draft?
This action cannot be undone.
);
}
```
### Multiple triggers
A single alert dialog can be opened by multiple trigger elements.
You can achieve this by using the same `handle` for several detached triggers, or by placing multiple `` components inside a single ``.
```jsx title="Multiple triggers within the Root part"
Trigger 1Trigger 2
...
```
```jsx title="Multiple detached triggers"
const demoAlertDialog = AlertDialog.createHandle();
Trigger 1Trigger 2
...
```
The alert dialog can render different content depending on which trigger opened it.
This is achieved by passing a `payload` to the `` and using the function-as-a-child pattern in ``.
The payload can be strongly typed by providing a type argument to the `createHandle()` function:
```jsx title="Detached triggers with payload" {1,3,7,12}
const demoAlertDialog = AlertDialog.createHandle<{ message: string }>();
Trigger 1
Trigger 2
{({ payload }) => (
Alert dialog
{payload !== undefined && (
Confirming {payload.message}
)}
)}
```
### Controlled mode with multiple triggers
You can control the alert dialog's open state externally using the `open` and `onOpenChange` props on ``.
This allows you to manage the alert dialog's visibility based on your application's state.
When using multiple triggers, you have to manage which trigger is active with the `triggerId` prop on `` and the `id` prop on each ``.
Note that there is no separate `onTriggerIdChange` prop.
Instead, the `onOpenChange` callback receives an additional argument, `eventDetails`, which contains the trigger element that initiated the state change.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { AlertDialog } from '@base-ui/react/alert-dialog';
type AlertPayload = { message: string };
const demoAlertDialog = AlertDialog.createHandle();
export default function AlertDialogDetachedTriggersControlledDemo() {
const [open, setOpen] = React.useState(false);
const [triggerId, setTriggerId] = React.useState(null);
const handleOpenChange = (isOpen: boolean, eventDetails: AlertDialog.Root.ChangeEventDetails) => {
setOpen(isOpen);
setTriggerId(eventDetails.trigger?.id ?? null);
};
return (
Discard
Delete
Sign out
handle={demoAlertDialog}
open={open}
onOpenChange={handleOpenChange}
triggerId={triggerId}
>
{({ payload }) => (
{payload?.message ?? 'Are you sure?'}
This action cannot be undone.
handle={demoAlertDialog}
open={open}
onOpenChange={handleOpenChange}
triggerId={triggerId}
>
{({ payload }) => (
{payload?.message ?? 'Are you sure?'}
This action cannot be undone.
Cancel
Confirm
)}
);
}
```
## API reference
### Root
Groups all parts of the alert dialog.
Doesn’t render its own HTML element.
**Root 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 dialog is opened or closed. |
| actionsRef | `RefObject` | - | A ref to imperative actions.\* `unmount`: When specified, the dialog will not be unmounted when closed.
Instead, the `unmount` function must be called to unmount the dialog manually.
Useful when the dialog's animation is controlled by an external library. |
| \* `close`: Closes the 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` | - | 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 popover is uncontrolled (i.e. when the `open` prop is not set). |
| children | `ReactNode \| PayloadChildRenderFunction` | - | The content of the dialog.
This can be a regular React node or a render function that receives the `payload` of the active trigger. |
### Trigger
A button that opens the alert dialog.
Renders a `