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.

#

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.

#

#

#

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

#

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

#

NameDefaultDescription
blockBackgroundInteractiontrueboolean

Show an overlay and block app interaction.

contentWrapperStyles

BoxProps

Drawer content

isOpenfalseboolean

Determines if drawer is open.

children

ReactNode

Drawer content. The common pattern is `DrawerHeader`, `DrawerBody`, and `DrawerFooter`.

closeOnEsctrueboolean

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.

trapFocusfalseboolean

Trap focus within drawer.

showOverlayfalseboolean

Render overlay.

onClose

() => void

Callback invoked to close the modal.

NameDefaultDescription

On this page

  • Import
  • Example
  • Guidelines
  • When to use
  • When not to use
  • Drawer props
  • Drawer footer props