Dialog with details & summary
Combining Dialog with the native details element in React so users can interact with it before JavaScript finishes loading.
Open preview in a new tab
Show modal
Success
Your payment has been successfully processed. We have emailed your receipt.
import "./style.css";
import { useEffect, useRef, useState } from "react";
import * as Ariakit from "@ariakit/react";
function useLoaded() {
const [loaded, setLoaded] = useState(false);
useEffect(() => setLoaded(true), []);
return loaded;
}
export default function Example() {
const ref = useRef<HTMLDetailsElement>(null);
const loaded = useLoaded();
const [open, setOpen] = useState(false);
// Hydrate the dialog state. This is necessary because the user may have
// opened the dialog before JavaScript has loaded.
useEffect(() => setOpen(!!ref.current?.open), []);
return (
<details
ref={ref}
open={open}
onToggle={(event) => setOpen(event.currentTarget.open)}
>
Show modal
// We're setting the modal prop to true only when JavaScript is enabled.
// This means that the dialog will initially have a non-modal state with
// no backdrop element, allowing users to interact with the content
// behind. This is necessary because, before JavaScript finishes
// loading, we can't automatically move focus to the dialog.
className="dialog"
>
Success
<p className="description">
Your payment has been successfully processed. We have emailed your
receipt.
</p>
<div>
</div>
</details>
);
}
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.
Styling
Resetting the default styles
By default, browsers apply some default styles to the details
element. We can reset them with the following CSS:
.button {
appearance: none;
}
.button::marker,
.button::-webkit-details-marker {
display: none;
}
You can learn more about styling Ariakit components on the Styling guide.
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.