A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
import React from 'react';import * as Dialog from '@radix-ui/react-dialog';import { Cross2Icon } from '@radix-ui/react-icons';import './styles.css';const DialogDemo = () => (<Dialog.Root><Dialog.Trigger asChild><button className="Button violet">Edit profile</button></Dialog.Trigger><Dialog.Portal><Dialog.Overlay className="DialogOverlay" /><Dialog.Content className="DialogContent"><Dialog.Title className="DialogTitle">Edit profile</Dialog.Title><Dialog.Description className="DialogDescription">Make changes to your profile here. Click save when you're done.</Dialog.Description><fieldset className="Fieldset"><label className="Label" htmlFor="name">Name</label><input className="Input" id="name" defaultValue="Pedro Duarte" /></fieldset><fieldset className="Fieldset"><label className="Label" htmlFor="username">Username</label><input className="Input" id="username" defaultValue="@peduarte" /></fieldset><div style={{ display: 'flex', marginTop: 25, justifyContent: 'flex-end' }}><Dialog.Close asChild><button className="Button green">Save changes</button></Dialog.Close></div><Dialog.Close asChild><button className="IconButton" aria-label="Close"><Cross2Icon /></button></Dialog.Close></Dialog.Content></Dialog.Portal></Dialog.Root>);export default DialogDemo;
Supports modal and non-modal modes.
Focus is automatically trapped when modal.
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 a dialog.
The 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 in the open dialog.
The button that closes the dialog.
An accessible title to be announced when the dialog is opened.
If you want to hide the title, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>
.
An optional accessible description to be announced when the dialog is opened.
If you want to hide the description, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>
. If you want to remove the description entirely, remove this part and pass aria-describedby={undefined}
to Dialog.Content
.
Use the controlled props to programmatically close the Dialog after an async operation has completed.
Move the content inside the overlay to render a dialog with overflow.
Customise the element that your dialog portals into.
Adheres to the Dialog WAI-ARIA design pattern.
Create your own API by abstracting the primitive parts into your own component.
This example abstracts the Dialog.Overlay
and Dialog.Close
parts.