Drawer

Beta

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 exports

You can import this module like so:

import {Drawer} from 'baseui/drawer'

It exports the following components or utility functions:

  • Drawer
  • SIZE
  • SIZE_DIMENSION
  • ANCHOR
  • CLOSE_SOURCE
  • StyledRoot
  • StyledBackdrop
  • StyledDrawerContainer
  • StyledDrawerBody
  • StyledClose