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;
Title
and Description
components.Install the component from your command line.
npm install @radix-ui/react-alert-dialog
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>
);
Contains all the parts of an alert dialog.
Prop | Type | Default |
---|---|---|
defaultOpen | boolean | |
open | boolean | |
onOpenChange | function |
A button that opens the dialog.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
Data Attribute | Values |
---|---|
[data-state] | "open" | "closed" |
When used, portals your overlay and content parts into the body
.
Prop | Type | Default |
---|---|---|
forceMount | boolean | |
container | HTMLElement | document.body |
A layer that covers the inert portion of the view when the dialog is open.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
forceMount | boolean |
Data Attribute | Values |
---|---|
[data-state] | "open" | "closed" |
Contains content to be rendered when the dialog is open.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
forceMount | boolean | |
onOpenAutoFocus | function | |
onCloseAutoFocus | function | |
onEscapeKeyDown | function |
Data Attribute | Values |
---|---|
[data-state] | "open" | "closed" |
A button that closes the dialog. This button should be distinguished visually from AlertDialog.Action
buttons.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
A button that closes the dialog. These buttons should be distinguished visually from the AlertDialog.Cancel
button.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
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 | boolean | false |
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 | boolean | false |
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>
);
};
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>
);
};
Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.
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 . |