Dialog with details & summary
Combining Dialog with the native details element in React so users can interact with it before JavaScript finishes loading.
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.