Open a new window that can be either modal
or non-modal and optionally rendered in a React portal
. This component is based on the WAI-ARIA Dialog Pattern.
npm install ariakit
Learn more in Getting started.
useDialogState() <DialogDisclosure /> <Dialog> <DialogDismiss /> <DialogHeading /> <DialogDescription /> </Dialog>
You can style all the backdrop elements using the [data-backdrop]
selector:
[data-backdrop] {
background-color: hsl(0 0 0 / 0.1);
}
To style the backdrop of a specific dialog, use the backdropProps
prop:
<Dialog backdropProps={{ className: "my-backdrop" }} />
Alternatively, you can pass a custom component to the backdrop
prop.
When the preventBodyScroll
prop is set to true
(default on modal
dialogs), the scrollbar will be automatically hidden when the dialog is open. If you have position:fixed
elements on your page, you may need to adjust their padding to account for the missing scrollbar width.
Ariakit automatically defines a --scrollbar-width
CSS variable. You can use this variable to adjust the padding-right
of your fixed elements:
.header {
padding-right: calc(16px + var(--scrollbar-width, 0));
}
Learn more in Styling.