Drawer

Drawer offers a way to show some information without creating a dedicated page for it. Usually used for showing information related to each row in a table, while staying on the same page.

#Import

The drawer may be composed of the following four components.

• Drawer: The outer drawer section.
• DrawerHeader: The drawer's header.
• DrawerBody: The drawer's body.
• DrawerFooter: The drawer's footer.

#Example

#Guidelines

#When to use

• To display information that doesn't have a dedicated page where it's displayed.

#When not to use

• When creating a resource. Use the WizardDrawer to create a resource in a drawer.

#Drawer props

Name	Default	Description
blockBackgroundInteraction	true	booleanShow an overlay and block app interaction.
closeOnOverlayClick	true	booleanClose drawer on overlay click.
contentWrapperStyles	—	Omit< | ChakraBoxProps, | "direction" | keyof ColorProps | keyof BackgroundProps | keyof BorderProps | > & | ColorProps & | BackgroundProps & | BorderProps & { | surface?: Surface; | }Drawer content
isOpen	false	booleanDetermines if drawer is open.
children	—	ReactNodeDrawer content. The common pattern is DrawerHeader, DrawerBody, and DrawerFooter.
closeOnEsc	true	booleanClose drawer on escape key press.
initialFocusRef	—	RefObject<HTMLElement>Ref to the element that should receive focus when the drawer opens.
placement	—	ChakraDrawerProps["placement"]The drawer's placement.
size	"lg"	"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"Drawer size.
trapFocus	false	booleanTrap focus within drawer.
showOverlay	false	booleanRender overlay.
onClose	—	() => voidCallback invoked to close the modal.