Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Navigation

Overlay

Confirmation DialogDrawerFilter MenuMenuTooltip

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.

#

#

#

  • To display information that doesn't have a dedicated page where it's displayed and is read-only (doesn't require any user action).

#

  • Don't use forms inside drawers, they're meant for showing information without asking for any user input.

#

NameDefaultDescription
isOpenfalseboolean

Determines if drawer is open.

title

string

Title to display at the top of the drawer.

children

ReactNode

Drawer content.

size"sm""xs" | "sm" | "md" | "lg"

Drawer size.

onClose

() => void

Callback invoked to close the modal.

On this page

  • Example
  • Guidelines
  • When to use
  • When not to use
  • Props