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.
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.Name | Default | Description |
---|---|---|
blockBackgroundInteraction | true | boolean Show an overlay and block app interaction. |
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 | — | React.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. |
Name | Default | Description |
---|---|---|
children | — | ReactNode The content of the footer. |