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⁠.

Dialog

Edit example

12345678910111213141516171819202122232425262728293031
import * as Ariakit from "@ariakit/react";
import { useState } from "react";
import "./style.css";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Ariakit.Button onClick={() => setOpen(true)} className="button">
        Show modal
      </Ariakit.Button>
      <Ariakit.Dialog
        open={open}
        onClose={() => setOpen(false)}
        className="dialog"
      >
        <Ariakit.DialogHeading className="heading">
          Success
        </Ariakit.DialogHeading>
        <p className="description">
          Your payment has been successfully processed. We have emailed your
          receipt.
        </p>
        <div>
          <Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>
        </div>
      </Ariakit.Dialog>
    </>
  );
}

import * as Ariakit from "@ariakit/react";
import { useState } from "react";
import "./style.css";

export default function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Ariakit.Button onClick={() => setOpen(true)} className="button">
        Show modal
      </Ariakit.Button>
      <Ariakit.Dialog
        open={open}
        onClose={() => setOpen(false)}
        className="dialog"
      >
        <Ariakit.DialogHeading className="heading">
          Success
        </Ariakit.DialogHeading>
        <p className="description">
          Your payment has been successfully processed. We have emailed your
          receipt.
        </p>
        <div>
          <Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>
        </div>
      </Ariakit.Dialog>
    </>
  );
}

Examples

Animated DialogAnimating a modal Dialog and its backdrop element using CSS. The component waits for the transition to finish before completely hiding the dialog or removing it from the React tree.

Dialog with scrollable backdropRendering a modal Dialog component inside a scrollable backdrop container for dialogs that are taller than the viewport.

Dialog with MenuShowing a nested dropdown Menu component inside a modal Dialog using React.

Warning on Dialog hidePreventing users from accidentally closing a modal Dialog component with unsaved changes by displaying a nested confirmation dialog.

Dialog with React RouterUsing React Router to create a modal Dialog that's controlled by the browser history.

Dialog with Next.js App RouterUsing Next.js Parallel Routes to create an accessible modal Dialog that is rendered on the server and controlled by the URL, with built-in focus management.

View all Dialog examples

API

useDialogStore()
useDialogContext()

<DialogProvider>
  <DialogDisclosure />
  <Dialog>
    <DialogDismiss />
    <DialogHeading />
    <DialogDescription />
  </Dialog>
</DialogProvider>
useDialogStore()
useDialogContext()

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

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);
}
[data-backdrop] {
  background-color: hsl(0 0 0 / 0.1);
}

To style the backdrop of a specific dialog, use the backdrop prop:

<Dialog backdrop={<div className="backdrop" />} />
<Dialog backdrop={<div className="backdrop" />} />

When the preventBodyScroll prop is set to true (default for modal dialogs), the scrollbar will be automatically hidden when the dialog is open. Ariakit keeps the scrollbar's space reserved with the scrollbar-gutter⁠ CSS property, so the page layout, including position: fixed elements, doesn't shift. On browsers with classic scrollbars, the reserved space shows the page background while the dialog is open, and fixed elements such as backdrops don't extend over it, just like they don't extend under a visible scrollbar.

When the scrollbar takes up space but scrollbar-gutter isn't supported (such as Safari before 18.2), Ariakit falls back to padding the body element and defines a --scrollbar-width CSS variable instead. If you need to support these browsers and your page contains position: fixed elements, you can apply this variable with a 0px fallback to adjust their padding-right:

.header {
  padding-right: calc(16px + var(--scrollbar-width, 0px));
}
.header {
  padding-right: calc(16px + var(--scrollbar-width, 0px));
}

Z-index

Modal dialogs are rendered at the end of the document using React Portal⁠, which means they will be rendered on top of all other elements by default.

However, if you set the portal prop to false or use the z-index property on other elements, you might need to adjust the z-index of the dialog:

.dialog {
  z-index: 100;
}
.dialog {
  z-index: 100;
}

For more information on styling with Ariakit, refer to the Styling guide.

Related components

ButtonTrigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation in React. This component is based on the WAI-ARIA Button Pattern.

DisclosureClick a button to either show (expand, open) or hide (collapse, close) a content element in React. This component is based on the WAI-ARIA Disclosure Pattern.

HeadingAdd automatic hierarchy to your page contents so users can easily navigate them. This component is based on the WAI-ARIA Heading Role.

PopoverShow a popup dialog positioned relative to an anchor element. This component can be either modal or non-modal and optionally rendered in a React portal.

FocusablePress Tab or click to shift focus to any React element. This abstract component standardizes focus behavior across different browsers.

PortalAttach an element to a DOM node outside the parent component's hierarchy.

View all components

Dialog

Examples

API

Styling

Styling the backdrop

Scrollbar width

Z-index

Stay tuned