Component size, gzipped: 34kb

Drawer

API

Drawer with anchor

Drawer with different size

Drawer with renderAll for SSR / SEO

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.

API

Drawer props

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

Drawer exports

You can import this module like so:

import {Drawer} from 'baseui/drawer'

It exports the following components or utility functions: