Nested Dialog

Rendering a modal Dialog to confirm an action inside another modal dialog using React.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
import "./style.css";
import { useState } from "react";
import {
  Button,
  Dialog,
  DialogDescription,
  DialogDismiss,
  DialogHeading,
  VisuallyHidden,
} from "@ariakit/react";

export default function Example() {
  const [cartOpen, setCartOpen] = useState(false);
  const [removing, setRemoving] = useState("");
  const [products, setProducts] = useState([
    "Summer T-Shirt",
    "Warm Jacket",
    "Slim Shorts",
  ]);

  const confirmRemove = () => {
    setProducts((products) => {
      return products.filter((product) => product !== removing);
    });
  };

  return (
    <>
      <Button onClick={() => setCartOpen(true)} className="button">
        View Cart
      </Button>

      <Dialog
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <div className="header">
          <DialogHeading className="heading">Your Shopping Cart</DialogHeading>
          <DialogDismiss className="button secondary dismiss" />
        </div>

        <table className="table">
          <tbody className="table-body">
            {products.map((product) => (
              <tr key={product}>
                <td className="table-cell">{product}</td>
                <td className="table-cell">
                  <Button
                    onClick={() => setRemoving(product)}
                    className="button danger"
                  >
                    Remove
                    <VisuallyHidden> {product}</VisuallyHidden>
                  </Button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        <DialogDismiss className="button primary">Checkout</DialogDismiss>
      </Dialog>

      <Dialog
        unmountOnHide
        open={!!removing}
        onClose={() => setRemoving("")}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <DialogHeading className="heading">Remove product</DialogHeading>
        <DialogDescription className="description">
          Are you sure you want to remove &quot;{removing}&quot; from your cart?
        </DialogDescription>
        <div className="buttons">
          <DialogDismiss onClick={confirmRemove} className="button danger">
            Remove
          </DialogDismiss>
          <DialogDismiss autoFocus className="button secondary">
            Cancel
          </DialogDismiss>
        </div>
      </Dialog>
    </>
  );
}

import "./style.css";
import { useState } from "react";
import {
  Button,
  Dialog,
  DialogDescription,
  DialogDismiss,
  DialogHeading,
  VisuallyHidden,
} from "@ariakit/react";

export default function Example() {
  const [cartOpen, setCartOpen] = useState(false);
  const [removing, setRemoving] = useState("");
  const [products, setProducts] = useState([
    "Summer T-Shirt",
    "Warm Jacket",
    "Slim Shorts",
  ]);

  const confirmRemove = () => {
    setProducts((products) => {
      return products.filter((product) => product !== removing);
    });
  };

  return (
    <>
      <Button onClick={() => setCartOpen(true)} className="button">
        View Cart
      </Button>

      <Dialog
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <div className="header">
          <DialogHeading className="heading">Your Shopping Cart</DialogHeading>
          <DialogDismiss className="button secondary dismiss" />
        </div>

        <table className="table">
          <tbody className="table-body">
            {products.map((product) => (
              <tr key={product}>
                <td className="table-cell">{product}</td>
                <td className="table-cell">
                  <Button
                    onClick={() => setRemoving(product)}
                    className="button danger"
                  >
                    Remove
                    <VisuallyHidden> {product}</VisuallyHidden>
                  </Button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        <DialogDismiss className="button primary">Checkout</DialogDismiss>
      </Dialog>

      <Dialog
        unmountOnHide
        open={!!removing}
        onClose={() => setRemoving("")}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <DialogHeading className="heading">Remove product</DialogHeading>
        <DialogDescription className="description">
          Are you sure you want to remove &quot;{removing}&quot; from your cart?
        </DialogDescription>
        <div className="buttons">
          <DialogDismiss onClick={confirmRemove} className="button danger">
            Remove
          </DialogDismiss>
          <DialogDismiss autoFocus className="button secondary">
            Cancel
          </DialogDismiss>
        </div>
      </Dialog>
    </>
  );
}

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.

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.

VisuallyHiddenHide an element visually but keep it available for screen readers and other assistive technologies.

View all components

Identifying nested dialogs

There are three ways Ariakit can identify nested dialogs:

They are nested in the React tree.

<Dialog>
  <Dialog />
</Dialog>
<Dialog>
  <Dialog />
</Dialog>

2
They are appended to the body element after the parent dialog is opened.
```
<Dialog />
<Dialog unmountOnHide />
<Dialog />
<Dialog unmountOnHide />
```

They are referenced in the getPersistentElements prop of the parent dialog.

<Dialog getPersistentElements={() => document.querySelectorAll(".dialog")} />
<Dialog className="dialog" />
<Dialog getPersistentElements={() => document.querySelectorAll(".dialog")} />
<Dialog className="dialog" />

In this example, we're using the second method. By passing the unmountOnHide prop to the nested dialog, it's rendered only when the dialog is open. This is the same strategy used by the Dialog module to support third-party dialogs and browser extensions that open popups, such as 1Password, Google Translate, and Grammarly.

This applies to all components that use Dialog under the hood, such as Combobox, Hovercard, Menu, Popover, Select, and Tooltip.

Related examples

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

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.

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

SubmenuRendering nested Menu components to create a dropdown menu with submenus that open when hovering over the parent menu item.

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

View all examples

Nested Dialog

Components

Identifying nested dialogs

Related examples

Stay tuned