Radix Dialog

Creating a modal dialog primitive offering the same API as Radix UI⁠ but using the Ariakit Dialog component instead.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
import * as Dialog from "./dialog.tsx";
import "./style.css";

export default function Example() {
  return (
    <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&apos;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">
              <svg
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                width={24}
                height={24}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

import * as Dialog from "./dialog.tsx";
import "./style.css";

export default function Example() {
  return (
    <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&apos;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">
              <svg
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                width={24}
                height={24}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

Components

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

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.

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

RoleProvide the basic Ariakit features to any component. This abstract component is based on the WAI-ARIA RoleType Role.

View all components

Browser extensions and third-party dialogs

The Ariakit Dialog component seamlessly integrates with browser extensions that open popups, such as 1Password, Grammarly, Google Translate, and many others. This ensures that users can interact with the extension while keeping the modal dialog open, using both keyboard and mouse inputs. The same is true for third-party libraries that open dialogs.

For elements that are already in the DOM, the getPersisentElements prop can be used to specify which elements should remain accessible when the modal dialog is open. This is useful to integrate with chat widgets like Intercom, toast libraries like react-toastify and react-hot-toast, and more. See the Dialog with React-Toastify example for a practical use case.

Focus trap elements

Most component libraries render visually hidden elements around the modal dialog to prevent users from tabbing to elements outside. The Ariakit Dialog component follows a different approach: there are no focus trap elements. Instead, the elements that are not part of the modal context are given the inert⁠ attribute on browsers that support it. An alternative method is used on older browsers, but the result is the same.

This allows keyboard and screen reader users to Tab to the browser chrome, where they can interact with the URL address bar, or leave an iframe, which mouse users could do already.

This approach results in a behavior that is more consistent with the native dialog⁠ element. Unfortunately, the native dialog element still doesn't work with browser extensions when opened as a modal.

Scrollable backdrop

The Ariakit Dialog component automatically closes when users click outside the dialog. This behavior is controlled by the hideOnInteractOutside prop, which is enabled by default.

However, Ariakit will make sure the dialog is not closed when users interact with the scrollbar on a backdrop container. See the Dialog with scrollable backdrop example for a practical use case.

Related examples

Radix ComboboxUsing just the necessary Ariakit components to build a Combobox with Radix UI. For projects already using Radix UI and looking for autocomplete, autosuggest and search features.

Radix Select with ComboboxRendering a searchable Radix UI Select component with a text field that enables typeahead & autocomplete features using the primitive Ariakit Combobox components.

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

Command MenuCombining Dialog and Combobox to enable users to search a command list in a Raycast-style modal.

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

Dialog with React-ToastifyShowing notification toasts using libraries like react-toastify and react-hot-toast while keeping a modal Dialog open with the getPersistentElements prop.

View all examples