Drawer

This content is SSR rendered and also rendered even if the drawer is closed! View it in the source or in your inspector!

Accessibility

We have built in functionality based on the recommendations for dialogs and drawers in WAI-ARIA Authoring Practices 1.1.

Upon opening, focus will be transferred to the first interactive element (unless autofocus is set to false)
Container element has aria-label="drawer"
Escape key closes the drawer
Click on backdrop (anywhere outside dialog) hides drawer.
Background is not be scrollable while drawer is open (position: fixed).
Upon closing, focus should return to element that triggered drawer.

Name	Type	Description
anchor	enum	Window side from which the drawer originates from.
animate	boolean	Sets whether the Drawer should be displayed by easing in and out.
autoFocus	boolean	If true, focus will shift to the first interactive element within the drawer.
children	react node	Drawer content.
closeable	boolean	Whether the drawer should be closeable by the user.
isOpen	boolean	Determines if the drawer is open.
mountNode	object	Defines where to mount the drawer. It accepts an HTMLElement.
onBackdropClick	function	Callback invoked when backdrop is clicked.
onClose	function	A callback that is invoked when the modal will close.
onEscapeKeyDown	function	Callback invoked when escape key is pressed.
overrides	custom	Lets you customize all aspects of the component.
renderAll	boolean	Renders all drawer content for SEO purposes regardless of drawer isOpen state.
showBackdrop	boolean	Whether the backdrop should be shown.
size	enum	Defines the modal size.

You can import this module like so:

import {Drawer} from 'baseui/drawer'

It exports the following components or utility functions: