BRAID
Braid Logo
 

Drawer

Open in Playroom

Alternatives

  • 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.

Accessibility

Follows the WAI-ARIA Dialog (Modal) Pattern.
Due to the size of the Drawer, all entrance and exit animations adhere to the users reduce motion preference.

Title and description

The title prop provides an accessible name announced to the user when the Drawer 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

Design considerations

Recommended for providing a focused or drill-down view into a subset of the page content, e.g. viewing more details about a list item, or editing a piece of data/information. For a smaller amount content or to prompt the user, consider using a Dialog instead.

Development considerations

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.

Widths

There are a variety of standard widths to choose from.
Open in Playroom

Position

The Drawer can be positioned on either the left or the right by setting the position prop.
Open in Playroom

Customising the close behaviour

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.
Open in Playroom
To prevent the Drawer from closing, e.g. due to validation, this function should return false.
Open in Playroom

Nested drawers

Although supported, in order to keep experiences simple nesting Drawers is not encouraged.
Open in Playroom