Dialog with details & summary
Combining Dialog with the native details element in React so users can interact with it before JavaScript finishes loading.
Show modal
Success
Your payment has been successfully processed. We have emailed your receipt.
import { useEffect, useRef, useState } from "react";
import * as Ariakit from "@ariakit/react";
import "./style.css";
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 dialog = Ariakit.useDialogStore();
const mounted = dialog.useState("mounted");
// Hydrate the dialog state. This is necessary because the user may have
// opened the dialog before JavaScript has loaded.
useEffect(() => dialog.setOpen(!!ref.current?.open), [dialog.setOpen]);
return (
<details
ref={ref}
open={mounted}
onToggle={(event) => dialog.setOpen(event.currentTarget.open)}
>
<Ariakit.Button as="summary" className="button">
Show modal
</Ariakit.Button>
<Ariakit.Dialog
store={dialog}
// 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.
modal={loaded}
backdrop={loaded && <div className="backdrop" />}
alwaysVisible={!loaded}
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>
</details>
);
}
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.
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.
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.