Drawer

Guidelines React

Github Storybook Markdown Copy for LLM

An overlay component that can be attached to the left/right side of the screen.

Import

import { Drawer } from "@cfa/react-core";

Live Editor

Examples

Default

This is the default Drawer without any props. By default, the Drawer can only be closed by using the CloseButton at the top, or using the ESC key.

Dismissable Drawer

A drawer that can be dismissed by clicking outside. When using the Drawer.Overlay, this prop needs to be added to the Overlay and not the Tray.

Hide Close Icon

The “X” at the top of the Drawer can be hidden, this can prevent users from closing the Drawer before taking an action

Custom Close Button

The Drawer.CloseButton is a pre-configured Button that can close the Drawer. This would typically be used for something like a “Cancel” button.

Custom Styling

You can customize the drawer’s appearance using CSS classes or inline styles:

Controlled Drawer

A drawer whose open state is controlled by the parent component.

Custom Overlay

The Drawer.Overlay provides a way for you to customize the Overlay itself, a common use case might be to add some z-index if you are seeing conflicts in your app. Generally you should not need to use this component.

Keep in mind that isDismissable and isKeyboardDismissDisabled will have to be used on the Overlay in this scenario.

Props

Visit the Documentation Site for the full list of props.

Drawer.Root

Name	Type	Default	Description
defaultOpen	boolean	-	Whether the overlay is open by default (uncontrolled).
isOpen	boolean	-	Whether the overlay is open by default (controlled).
onOpenChange	(isOpen: boolean) => void	-	Handler that is called when the overlay's open state changes.

Drawer.Overlay

Drawer.Tray