• Drawer For a larger amount of content.
  • Accordion For revealing content inline with a strong visual treatment.
  • Disclosure For revealing content inline with a light visual treatment.
Due to the size of the Dialog, all entrance and exit animations adhere to the users reduce motion preference.
Dialogs should only be used as a last resort when other in-flow alternatives are not suitable.
It’s recommended that you connect the Dialog’s open state to your router so that it can be closed via the browser’s back button.
There are a variety of standard widths to choose from, as well as content width for custom sizing based on the content of the dialog.
You can also provide an element to render at the top of the dialog via the illustration prop.
The onClose function is called when the user either click the close button inside the Dialog, or clicks on the backdrop outside the Dialog.
Translation hint The aria-label for the close button can be customised by providing a closeLabel prop.
If the contents are unable to fit on the screen, dialogs become scrollable with a fixed close button.
If you need to display a large amount of content, consider using a Drawer instead.
Although supported, in order to keep experiences simple nesting Dialogs is not encouraged.