Source: https://www.radix-ui.com/primitives/docs/components/alert-dialog

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Case studies Blog

Search

/

Overview

Introduction Getting started Accessibility Releases

Guides

Styling Animation Composition Server-side rendering

Components

Accordion Alert Dialog Aspect Ratio Avatar Checkbox Collapsible Context Menu Dialog Dropdown Menu Form

Preview Hover Card Label Menubar Navigation Menu One-Time Password Field

Preview Password Toggle Field

Preview Popover Progress Radio Group Scroll Area Select Separator Slider Switch Tabs Toast Toggle Toggle Group Toolbar Tooltip

Utilities

Accessible Icon Direction Provider Portal Slot Visually Hidden

Components

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Delete account

index.jsxindex.jsxstyles.cssstyles.css

CSS

import * as React from "react";
import { AlertDialog } from "radix-ui";
import "./styles.css";

const AlertDialogDemo = () => (
	<AlertDialog.Root>
		<AlertDialog.Trigger asChild>
			<button className="Button violet">Delete account</button>
		</AlertDialog.Trigger>
		<AlertDialog.Portal>
			<AlertDialog.Overlay className="AlertDialogOverlay" />
			<AlertDialog.Content className="AlertDialogContent">
				<AlertDialog.Title className="AlertDialogTitle">
					Are you absolutely sure?
				</AlertDialog.Title>
				<AlertDialog.Description className="AlertDialogDescription">
					This action cannot be undone. This will permanently delete your
					account and remove your data from our servers.
				</AlertDialog.Description>
				<div style={{ display: "flex", gap: 25, justifyContent: "flex-end" }}>
					<AlertDialog.Cancel asChild>
						<button className="Button mauve">Cancel</button>
					</AlertDialog.Cancel>
					<AlertDialog.Action asChild>
						<button className="Button red">Yes, delete account</button>
					</AlertDialog.Action>
				</div>
			</AlertDialog.Content>
		</AlertDialog.Portal>
	</AlertDialog.Root>
);

export default AlertDialogDemo;

Features

Focus is automatically trapped.

Can be controlled or uncontrolled.

Manages screen reader announcements with Title and Description components.

Esc closes the component automatically.

Installation

---

Install the component from your command line.

npm install @radix-ui/react-alert-dialog

Anatomy

---

Import all parts and piece them together.

import { AlertDialog } from "radix-ui";

export default () => (
	<AlertDialog.Root>
		<AlertDialog.Trigger />
		<AlertDialog.Portal>
			<AlertDialog.Overlay />
			<AlertDialog.Content>
				<AlertDialog.Title />
				<AlertDialog.Description />
				<AlertDialog.Cancel />
				<AlertDialog.Action />
			</AlertDialog.Content>
		</AlertDialog.Portal>
	</AlertDialog.Root>
);

API Reference

---

Root

Contains all the parts of an alert dialog.

| Prop | Type | Default | | --- | --- | --- | | defaultOpen<br><br>Prop description | boolean | No default value | | open<br><br>Prop description | boolean | No default value | | onOpenChange<br><br>Prop description | function<br><br>See full type | No default value |

Trigger

A button that opens the dialog.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false |

| Data attribute | Values | | --- | --- | | [data-state] | "open" \| "closed" |

Portal

When used, portals your overlay and content parts into the body.

| Prop | Type | Default | | --- | --- | --- | | forceMount<br><br>Prop description | boolean | No default value | | container<br><br>Prop description | HTMLElement | document.body |

Overlay

A layer that covers the inert portion of the view when the dialog is open.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | forceMount<br><br>Prop description | boolean | No default value |

| Data attribute | Values | | --- | --- | | [data-state] | "open" \| "closed" |

Content

Contains content to be rendered when the dialog is open.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false | | forceMount<br><br>Prop description | boolean | No default value | | onOpenAutoFocus<br><br>Prop description | function<br><br>See full type | No default value | | onCloseAutoFocus<br><br>Prop description | function<br><br>See full type | No default value | | onEscapeKeyDown<br><br>Prop description | function<br><br>See full type | No default value |

| Data attribute | Values | | --- | --- | | [data-state] | "open" \| "closed" |

Cancel

A button that closes the dialog. This button should be distinguished visually from AlertDialog.Action buttons.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false |

Action

A button that closes the dialog. These buttons should be distinguished visually from the AlertDialog.Cancel button.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false |

Title

An accessible name to be announced when the dialog is opened. Alternatively, you can provide aria-label or aria-labelledby to AlertDialog.Content and exclude this component.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false |

Description

An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby to AlertDialog.Content and exclude this component.

| Prop | Type | Default | | --- | --- | --- | | asChild<br><br>Prop description | boolean | false |

Examples

---

Close after asynchronous form submission

Use the controlled props to programmatically close the Alert Dialog after an async operation has completed.

import * as React from "react";
import { AlertDialog } from "radix-ui";

const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));

export default () => {
	const [open, setOpen] = React.useState(false);

	return (
		<AlertDialog.Root open={open} onOpenChange={setOpen}>
			<AlertDialog.Trigger>Open</AlertDialog.Trigger>
			<AlertDialog.Portal>
				<AlertDialog.Overlay />
				<AlertDialog.Content>
					<form
						onSubmit={(event) => {
							wait().then(() => setOpen(false));
							event.preventDefault();
						}}
					>
						{/** some inputs */}
						<button type="submit">Submit</button>
					</form>
				</AlertDialog.Content>
			</AlertDialog.Portal>
		</AlertDialog.Root>
	);
};

Custom portal container

Customise the element that your alert dialog portals into.

export default () => {
	const [container, setContainer] = React.useState(null);
	return (
		<div>
			<AlertDialog.Root>
				<AlertDialog.Trigger />
				<AlertDialog.Portal container={container}>
					<AlertDialog.Overlay />
					<AlertDialog.Content>...</AlertDialog.Content>
				</AlertDialog.Portal>
			</AlertDialog.Root>

			<div ref={setContainer} />
		</div>
	);
};

Accessibility

---

Adheres to the Alert and Message Dialogs WAI-ARIA design pattern .

Keyboard Interactions

| Key | Description | | --- | --- | | Space | Opens/closes the dialog. | | Enter | Opens/closes the dialog. | | Tab | Moves focus to the next focusable element. | | Shift + Tab | Moves focus to the previous focusable element. | | Esc | Closes the dialog and moves focus to AlertDialog.Trigger. |

PreviousAccordion

NextAspect Ratio

Edit this page on GitHub.