Drawer is used to overlay content on top of the interface. They are intended to capture the user’s attention in order to inform or shift focus to a pertinent task.

import { Drawer } from '@sproutsocial/racine'


System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.


Drawer Header

Most drawers should have headers. The Drawer.Header subcomponent makes it easy to build a default header — simply supply a title prop and the Drawer Header will automatically render the title along with a close button.

If you need to build a custom header, you can do so by passing a children prop, which allows a developer to completely customize the header while maintaining the correct padding. You can use the Drawer.CloseButton subcomponent to render the close button manually.

Finally, a render prop can be supplied, which gives the developer full control of how the header will render. The function receives the context of the parent Drawer as an argument.

Basic Drawer Header


Drawer Header with children
Drawer Header with render
Custom Drawer Header

Drawer Close Button

When making a custom header, a close icon button is still needed. The Drawer.CloseButton subcomponent makes it simple to include the standard close icon button in any drawer. The base component of Drawer.CloseButton is a standard Button and accepts the same props as that component.

The close button also accepts a children if you would like to render something other than the icon.

If you need custom on-close behavior or more flexibility in rendering, there is a render prop which receives the context of the parent Drawer as an argument.

Basic Close Button
Drawer Close Button with children
Drawer Close Button with render


Drawer with empty header

Drawer sliding in from left

By default, the drawer component will slide in from the right side of the screen. Set the direction prop to left to change this behavior.

import { Drawer } from '@sproutsocial/racine'