Drawer
Drawers are containers sliding from the side of the screen to provide critical information or an actionable piece of content.

Drawer is built on top of the Overlay component and display content centered on the screen. If you need to display content differently, you can try using Modal or even Overlay directly.

Usage

Drawer is a controlled component which means that it has an active property and multiple handlers that you can use to change the value of this property. Once Drawer is active – it will prevent scrolling of the whole page and will just support scrolling for the content displayed inside the content area.

Note: It's safe to just keep Drawer in your render. They will be rendered in the DOM only if they're active and that will not conflict with Drawer animation.

Position

Drawer supports bottom, start and end position. bottom is the default value and is recommended for mobile usage.

Sizes

Drawer defines its size based on the width of the content. However, you can define a custom size using a pixel number value or any other valid css width/height value.

Drawer comes with some padding by default. If you want to have full flexibility for its content composition – you can remove the padding by disabling the padded property.

To make the experience better, we're providing a useToggle hook that you can use together with Drawer or other components that toggle states.

Composition

Drawer supports Drawer.Title and Drawer.Subtitle compound components that take handle of the aria attributes and provide default text styles. You can use them together with a Dismissible utility to implement more complex drawer layouts.

Accessibility

Drawer traps focus inside its root element, which means that using any type of keyboard navigation will keep the focus inside the Overlay while it's opened.

Drawer triggers its onClose handler on Esc key press.

Using Drawer.Title and Drawer.Subtitle will automatically apply aria-labelledby and aria-describedby attributes to the dialog element.

Properties

Drawer properties:

NameTypeDefaultRequiredComment
activeboolean-false
sizenumber, string-false
positionstartbottomendbottom
paddedbooleantruefalseDoes drawer have content paddings?
onOpen() => {}-falseOverlay open handler
onClose() => {}-falseOverlay close handler
childrenReactNode, ({ active }) => ReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseattributes for the root element

Drawer.Title properties:

NameTypeDefaultRequiredComment
childrenReactNode-false

Drawer.Subtitle properties:

NameTypeDefaultRequiredComment
childrenReactNode-false