• 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.
Due to the size of the Drawer, all entrance and exit animations adhere to the users reduce motion preference.
Drawers should only be used as a last resort when other in-flow alternatives are not suitable.
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.
The Drawer can be positioned on either the left or the right by setting the position prop.
The onClose function is called when the user either click the close button inside the Drawer, or clicks on the backdrop outside the Drawer.
Translation hint The aria-label for the close button can be customised by providing a closeLabel prop.
Although supported, in order to keep experiences simple nesting Drawers is not encouraged.