Skip to main content

Drawer

The Drawer component is a modal component that can be positioned to the left, right, top or bottom of the viewport. It can be used to display additional information or actions without leaving the current screen. It renders contents similar to the Modal component and supports a header, body, fixed footer and icon.

Result
Loading...
Live Editor

Variations, Scrolling, and Tooltips

The Drawer components allow for customization similar to Modal. The body supports the prop bordered which will render a variant of the body that places a border at the top and bottom of the body.

This example also shows using the scrollable prop on the body to allow for scrolling within the body.

❗Tooltips need to be attached to a container outside of the Drawer.Body. Here the Tooltip on the Select label is attached to the Drawer.Header.

Result
Loading...
Live Editor

Sizes

The size of the Drawer can be customized. However, all Drawers will be full screen below the medium breakpoint.

Result
Loading...
Live Editor

Responsive Footers

Responsive footers will adjust the display order of their button children below the small breakpoint.

Result
Loading...
Live Editor

With DrawerSlide

The DrawerSlide component lets you display additional content in a Drawer. When shown, it will slide in and cover the main content and footer of your Drawer.

Result
Loading...
Live Editor

Props

Drawer

DrawerHeader

The DrawerHeader supports a static set of props to render title, subtitle, and icon in a consistent manner. It also supports rendering children for more customization.

DrawerBody

DrawerFooter

The DrawerFooter component will automatically adjust the display of the buttons within such that they stack.

DrawerSlide

The DrawerSlide component allows you to slide in secondary content in a Drawer.