Components

Alert Dialog

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

import React from 'react';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
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 * as AlertDialog from '@radix-ui/react-alert-dialog';
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.

PropTypeDefault
defaultOpenbooleanNo default value
openbooleanNo default value
onOpenChangefunctionNo default value

Trigger

A button that opens the dialog.

PropTypeDefault
asChildbooleanfalse
Data attributeValues
[data-state]"open" | "closed"

Portal

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

PropTypeDefault
forceMountbooleanNo default value
containerHTMLElementdocument.body

Overlay

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

PropTypeDefault
asChildbooleanfalse
forceMountbooleanNo default value
Data attributeValues
[data-state]"open" | "closed"

Content

Contains content to be rendered when the dialog is open.

PropTypeDefault
asChildbooleanfalse
forceMountbooleanNo default value
onOpenAutoFocusfunctionNo default value
onCloseAutoFocusfunctionNo default value
onEscapeKeyDownfunctionNo default value
Data attributeValues
[data-state]"open" | "closed"

Cancel

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

PropTypeDefault
asChildbooleanfalse

Action

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

PropTypeDefault
asChildbooleanfalse

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.

PropTypeDefault
asChildbooleanfalse

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.

PropTypeDefault
asChildbooleanfalse

Examples

Close after asynchronous form submission

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

import React from 'react';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
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

KeyDescription
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.