The Minimizable Dialog component is a non-modal dialog that can be minimized to the bottom right of the page. It is meant for situations like a chat dialog, where the user may start the chat and then want to minimize it while they complete other tasks on the page.
Only use one Minimizable Dialog on a page
We currenly only support having one Minimizable Dialog open on a page. If you have questions, please post a GitHub Discussion.
Minimizable Dialog and non-modal dialogs follow these accessibility guidelines:
- There must be a focusable element inside the dialog.
- There should be a close button so screen readers have a specific close action to target.
- A Minimizable Dialog is a focus trap, and focus is placed inside it when it's shown.
- A Minimizable Dialog must be triggered by an explicit user action, e.g. clicking a button.
The MinimizableDialogButton renders a Button component and accepts all of its props, which are listed on the Button page.
Minimizable Dialog comes with the option of "hooking" into the internal state by using the state hook originally provided by Reakit.
Rather than the state be internal to the component, you can use the useMinimizableDialogState hook and pass the returned state
to MinimizableDialogContainer as the state prop.
This allows you to use certain returned props from the state hook, including functions like hide and show.
It should be noted that when doing so, the state prop takes precedent over the other properties that affect
the state or initial state of the Minimizable Dialog. They will be ignored in favour of them being provided as arguments
to the useMinimizableDialogState hook.
For full details on how to use the state hook, and what props to provide it, follow the Non-Modal Dialog Primitive documentation.