Edit this page

Drawer

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.

Drawer API

animate boolean = true

Sets whether the Drawer should be displayed by easing in and out

isOpen boolean = false

autoFocus boolean = true

If true, focus will shift to the first interactive element within the drawer. If false, the drawer container itself will receive focus. Moving focus into a newly opened drawer is important for accessibility purposes, so please be careful!

mountNode HTMLElement

Where to mount the modal

HTMLElement

children union

Drawer content. The children-as-function API may be preferable for performance reasons (wont render until opened)

One of
Node,
=> Node

closeable boolean = true

Whether the modal should be closeable by the user (either via escape, backdrop click, etc). You can set this to false if your modal has an action that the user must take before closing.

onClose function

closeSource $Keys{ closeButton: "closeButton", backdrop: "backdrop", escape: "escape" }
 => mixed

overrides object = {}

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
children Node
$animating boolean required
$isVisible boolean required
$isOpen boolean required
$size required One of
$Keys{ default: "default", full: "full", auto: "auto" },
string
$closeable boolean required
$anchor required One of
$Keys{ left: "left", right: "right", top: "top", bottom: "bottom" },
string
Backdrop { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
children Node
$animating boolean required
$isVisible boolean required
$isOpen boolean required
$size required One of
$Keys{ default: "default", full: "full", auto: "auto" },
string
$closeable boolean required
$anchor required One of
$Keys{ left: "left", right: "right", top: "top", bottom: "bottom" },
string
DrawerBody { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
children Node
$animating boolean required
$isVisible boolean required
$isOpen boolean required
$size required One of
$Keys{ default: "default", full: "full", auto: "auto" },
string
$closeable boolean required
$anchor required One of
$Keys{ left: "left", right: "right", top: "top", bottom: "bottom" },
string
DrawerContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
children Node
$animating boolean required
$isVisible boolean required
$isOpen boolean required
$size required One of
$Keys{ default: "default", full: "full", auto: "auto" },
string
$closeable boolean required
$anchor required One of
$Keys{ left: "left", right: "right", top: "top", bottom: "bottom" },
string
Close { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
children Node
$animating boolean required
$isVisible boolean required
$isOpen boolean required
$size required One of
$Keys{ default: "default", full: "full", auto: "auto" },
string
$closeable boolean required
$anchor required One of
$Keys{ left: "left", right: "right", top: "top", bottom: "bottom" },
string

size union =

Controls the size of the modal (primarily width). Can be a SIZE constant or css width property value.

One of
$Keys{ default: "default", full: "full", auto: "auto" },
string

anchor union =

One of
$Keys{ left: "left", right: "right", top: "top", bottom: "bottom" },
string

showBackdrop boolean = true

Whether the backdrop should be present

onBackdropClick function

Function to be called when backdrop is clicked

Event => mixed

onEscapeKeyDown function

Event => mixed