Alert Dialog

<Description> A modal dialog that interrupts the user with important content and expects a response. </Description> <HeroContainer> <AlertDialogDemo /> </HeroContainer> <HeroCodeBlock folder="AlertDialog" />

<Highlights features={[ "Focus is automatically trapped.", "Can be controlled or uncontrolled.", Manages screen reader announcements with <Code>Title</Code> and{" "} <Code>Description</Code> components. , "Esc closes the component automatically.", ]} />

Installation

Install the component from your command line.

bash

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

Anatomy

Import all parts and piece them together.

jsx

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.

<PropsTable data={[ { name: "defaultOpen", type: "boolean", description: "The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.", }, { name: "open", type: "boolean", description: ( The controlled open state of the dialog. Must be used in conjunction with <Code>onOpenChange</Code>. ), }, { name: "onOpenChange", type: "(open: boolean) => void", typeSimple: "function", description: "Event handler called when the open state of the dialog changes.", }, ]} />

Trigger

A button that opens the dialog.

<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

Portal

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

<PropsTable data={[ { name: "forceMount", type: "boolean", description: ( Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. If used on this part, it will be inherited by <Code>AlertDialog.Overlay</Code> and{" "} <Code>AlertDialog.Content</Code>. ), }, { name: "container", type: "HTMLElement", default: "document.body", description: "Specify a container element to portal the content into.", }, ]} />

Overlay

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

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description: (
			<span>
				Used to force mounting when more control is needed. Useful when
				controlling animation with React animation libraries. It inherits from{" "}
				<Code>AlertDialog.Portal</Code>.
			</span>
		),
	},
]}

Content

Contains content to be rendered when the dialog is open.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "forceMount",
		type: "boolean",
		description: (
			<span>
				Used to force mounting when more control is needed. Useful when
				controlling animation with React animation libraries. It inherits from{" "}
				<Code>AlertDialog.Portal</Code>.
			</span>
		),
	},
	{
		name: "onOpenAutoFocus",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves to the destructive action after
				opening. It can be prevented by calling{" "}
				<Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onCloseAutoFocus",
		type: "(event: Event) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when focus moves to the trigger after closing. It
				can be prevented by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
	{
		name: "onEscapeKeyDown",
		type: "(event: KeyboardEvent) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the escape key is down. It can be prevented
				by calling <Code>event.preventDefault</Code>.
			</span>
		),
	},
]}

Cancel

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

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

Action

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

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

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.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

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.

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

Examples

Close after asynchronous form submission

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

jsx

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();
						}}
					>
						<button type="submit">Submit</button>
					</form>
				</AlertDialog.Content>
			</AlertDialog.Portal>
		</AlertDialog.Root>
	);
};

Custom portal container

Customise the element that your alert dialog portals into.

jsx

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

<KeyboardTable data={[ { keys: ["Space"], description: "Opens/closes the dialog.", }, { keys: ["Enter"], description: "Opens/closes the dialog.", }, { keys: ["Tab"], description: "Moves focus to the next focusable element.", }, { keys: ["Shift + Tab"], description: "Moves focus to the previous focusable element.", }, { keys: ["Esc"], description: ( Closes the dialog and moves focus to <Code>AlertDialog.Trigger</Code>. ), }, ]} />