Open in Playroom
  • 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.
Follows the WAI-ARIA Dialog (Modal) Pattern.Due to the size of the Dialog, all entrance and exit animations adhere to the users reduce motion preference.
The title prop provides an accessible name announced to the user when the Dialog is opened. Optionally, a description can be provided and will be announced by a screen reader as well as visually forming part of the header block.
Open in Playroom
Recommended for prompting the user to make a decision or confirm an action. For more detailed content or user input (e.g. forms), consider using a Drawer instead.
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.
Select width:
xsmall
Open in Playroom
You can also provide an element to render at the top of the dialog via the illustration prop.
Open in Playroom
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.
Open in Playroom
To prevent the Dialog from closing, e.g. due to validation, this function should return false.
Open in Playroom
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.
Open in Playroom
Although supported, in order to keep experiences simple nesting Dialogs is not encouraged.
Open in Playroom