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	boolean Show an overlay and block app interaction.
closeOnOverlayClick	true	boolean Close drawer on overlay click.
contentWrapperStyles	—	BoxProps Drawer content
isOpen	false	boolean Determines if drawer is open.
children	—	ReactNode Drawer content. The common pattern is `DrawerHeader`, `DrawerBody`, and `DrawerFooter`.
closeOnEsc	true	boolean Close 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" | "full" Drawer size.
trapFocus	false	boolean Trap focus within drawer.
showOverlay	false	boolean Render overlay.
onClose	—	() => void Callback invoked to close the modal.

#Drawer footer props

Name	Default	Description