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 yourdata 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;
Focus is automatically trapped.
Can be controlled or uncontrolled.
Manages screen reader announcements with Title
and Description
components.
Esc closes the component automatically.
Install the component from your command line.
Import all parts and piece them together.
Contains all the parts of an alert dialog.
A button that opens the dialog.
When used, portals your overlay and content parts into the body
.
A layer that covers the inert portion of the view when the dialog is open.
Contains content to be rendered when the dialog is open.
A button that closes the dialog. This button should be distinguished visually from AlertDialog.Action
buttons.
A button that closes the dialog. These buttons should be distinguished visually from the AlertDialog.Cancel
button.
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.
An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby
to AlertDialog.Content
and exclude this component.
Use the controlled props to programmatically close the Alert Dialog after an async operation has completed.
Customise the element that your alert dialog portals into.
Adheres to the Alert and Message Dialogs WAI-ARIA design pattern.