Bain Logo


Jump to Props

Provide navigational support or present users with a temporary action sheet, docked to the edges of the screen.

Basic Usage

Setting the position

Simply pass anchor to 'left', 'right', 'top' or 'bottom'.

Display Mode

By default, the Drawer will appear like a Modal; covering the content behind it. You can also choose to use a permanent drawer by setting the displayMode prop to permanent.

This mode disregards the isOpen prop and permanently places a fixed Drawer.

Closing the drawer via other elements

If you wish to 'manually' close the drawer after the user performs a specific action, just pass the function handling the component's isOpen prop to the children of the Drawer. In this case, it's the toggleOpen function.

Note here how we are also setting focus on the button by passing a ref to the button.

Changing the style

Although some style overrides are possible with the Drawer component, it is not recommended to 'hack' at it too much.

If you wish to change the style of the Drawer, you can either tweak the style of the drawer (for instance, changing the background color via the bg prop or change the padding) or you can remove the default styles and style the child components to your liking.

The below example achieves a 'floating' look by removing the background and box shadow off the drawer, then providing styling via the child Flex.


Below are a list of common props for this component.

  • Props
  • Styled Functions

The content to render


Whether or not the drawer is open


What to do when user triggers the close action. This is usually by clicking on the backdrop area or swiping away.

anchorleft | right | top | bottomleft

Which side of the screen to anchor the drawer to.

displayModetemporary | permanenttemporary

Either show as a temporary popout that blocks the main content temporarily, or permanently place it in the layout.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy