• Dialog For a smaller amount of content.
  • Accordion For revealing content inline with a strong visual treatment.
  • Disclosure For revealing content inline with a light visual treatment.
Drawers should only be used as a last resort when other in-flow alternatives are not suitable.
In order to keep experiences simple, Drawers and Dialogs cannot be nested inside one another.
It’s recommended that you connect the Drawer’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.