Components

Drawer

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'

Properties

System props

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

NameTypeDefaultDescriptionRequired?
childrenReact.Node
closeButtonLabelstring
Label for the close button. Usually this should be "Close"
direction"left""right""right"
Whether the drawer slides in from the left or right side of the screen
disableCloseOnClickOutsidebooleanfalse
In some cases, you may not want the user to be able to click outside of the drawer to close it. You can disable that with this prop.
idstring
isOpenboolean
offsetnumber0
onClose() => void
zIndexnumber7

Subcomponents

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

Notifications

Drawer Header with children
Drawer Header with render
Custom Drawer Header
NameTypeDefaultDescriptionRequired?
titlestring""
childrenReact.Node
renderTypeDrawerContext => React.Node
An optional function that receives the context of the parent drawer as an argument. Can be used to customize the appearance of the 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
NameTypeDefaultDescriptionRequired?
renderTypeDrawerContext => React.Node
An optional function that receives the context of the parent drawer as an argument. Can be used to customize the on-close behavior.
childrenReact.Node

Recipes

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'