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?
childrenReactNode
closeButtonLabelstring
direction"left""right""right"
disableCloseOnClickOutsidebooleanfalse
headerunknown<DrawerHeader />
idstring
isOpenboolean
offsetnumber0
onClosesignature
zIndexnumber7

Subcomponents

Drawer Header

Every drawer has a header, which provides a close icon in the upper right-hand corner. You can supply a custom header in order to add a title for the drawer or to render other arbitrary content in the header (such as tabs or subheaders).

The following example shows a drawer header with a title and children, all of which are optional. If you provide children, they will be rendered in the space below the title and the close icon.

Notifications

NameTypeDefaultDescriptionRequired?
titlestring""
childrenReactNode

Recipes

Drawer with no header

If you do not provide a header component, or provide a header component without a title, the header will render without a bottom border and the close icon only.

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'