Drawer

ReactProps

Props

API reference for Drawer. For usage examples, see the React tab.

Drawer.Root

Name	Type	Default
children* (required)	ReactNode	—
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
isOpen	boolean	—
Whether the overlay is open by default (controlled).

Events (1)(1 prop)

Drawer.CloseButton

Name	Type	Default
children	ChildrenOrFunction<ButtonRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
fullWidth	boolean	false
Renders the Button in with a fluid width
isDisabled	boolean	—
Whether the button is disabled.
isPending	boolean	—
Whether the button is in a pending state. This disables press and hover events while retaining the ability to focus, and announces the pending state to screen readers.
size	"lg" | "md" | "sm"	md
Determines the size of the Button
variant	"destructive" | "primary" | "secondary" | "tertiary"	secondary
Variant for the button.

Accessibility (11)(11 props)

Advanced (12)(12 props)

Events (75)(75 props)

Forms (9)(9 props)

Styling (2)(2 props)

Drawer.Content

Name	Type	Default
children	ReactNode	—
The content or child elements nested within this component.

Accessibility (2)(2 props)

Styling (2)(2 props)

Drawer.Footer

Name	Type	Default
children	ReactNode	—
The content or child elements nested within this component.

Accessibility (2)(2 props)

Styling (2)(2 props)

Drawer.Overlay

Name	Type	Default
children* (required)	ReactNode	—
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
isDismissable	boolean	false
Enables the drawer to be closed by clicking outside of the drawer
isEntering	boolean	—
Whether the modal is currently performing an entry animation.
isExiting	boolean	—
Whether the modal is currently performing an exit animation.
isKeyboardDismissDisabled	boolean	false
Whether pressing the escape key to close the modal should be disabled.
isOpen	boolean	—
Whether the overlay is open by default (controlled).
UNSTABLE_deferUntilEntered	boolean	—
Whether to wait until the entry animation completes before hiding content outside the modal and moving focus into it.
UNSTABLE_overrideFocus	boolean	—
Whether to override the focus() method so it does not scroll the page. This is temporary and will be removed after fully testing all overlays.

Advanced (8)(8 props)

Events (67)(67 props)

Styling (2)(2 props)

Drawer.Title

Name	Type	Default
children	ReactNode	—
The content or child elements nested within this component.
level	number	3
The heading level.

Accessibility (2)(2 props)

Styling (2)(2 props)

Drawer.Tray

Name	Type	Default
children	ReactNode	—
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
isCloseButtonHidden	boolean	false
Removes the close button from the drawer
isDismissable	boolean	false
Enables the drawer to be closed by clicking outside of the drawer
isEntering	boolean	—
Whether the modal is currently performing an entry animation.
isExiting	boolean	—
Whether the modal is currently performing an exit animation.
isKeyboardDismissDisabled	boolean	false
Whether pressing the escape key to close the modal should be disabled.
isOpen	boolean	—
Whether the overlay is open by default (controlled).
position	"left" | "right"	"right"
Which edge of the viewport the drawer is anchored to.
size	"lg" | "md" | "sm"	'md'
Size of the drawer
UNSTABLE_deferUntilEntered	boolean	—
Whether to wait until the entry animation completes before hiding content outside the modal and moving focus into it.
UNSTABLE_overrideFocus	boolean	—
Whether to override the focus() method so it does not scroll the page. This is temporary and will be removed after fully testing all overlays.

Advanced (8)(8 props)

Events (67)(67 props)

Styling (2)(2 props)