Component size, gzipped: 30kb

Drawer

Loading
API

Drawer with anchor

Drawer with different size

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

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