• 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.
Dialogs should only be used as a last resort when other in-flow alternatives are not suitable.
In order to keep experiences simple, Dialogs and Drawers cannot be nested inside one another.
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.
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.