Dialog

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Button } from "ariakit/button";
import {
  Dialog,
  DialogDismiss,
  DialogHeading,
  useDialogState,
} from "ariakit/dialog";
import "./style.css";

export default function Example() {
  const dialog = useDialogState();
  return (
    <>
      <Button onClick={dialog.toggle} className="button">
        Show modal
      </Button>
      <Dialog state={dialog} className="dialog">
        <DialogHeading className="heading">Success</DialogHeading>
        <p className="description">
          Your payment has been successfully processed. We have emailed your
          receipt.
        </p>
        <div>
          <DialogDismiss className="button">OK</DialogDismiss>
        </div>
      </Dialog>
    </>
  );
}

Installation

npm install ariakit

Learn more in Getting started.

API

useDialogState()

<DialogDisclosure />
<Dialog>
  <DialogDismiss />
  <DialogHeading />
  <DialogDescription />
</Dialog>

Styling

Styling the backdrop

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.

Scrollbar width

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.