Drawer

Open in Playground

Panel dialog that opens from an edge (side: right, left, top or bottom) with focus trap, Escape and backdrop to close. width (a max-w-* class) sizes the side drawers and height (a max-h-* class) the top and bottom ones. Add animated to slide it in and out and fade the backdrop; it is off by default, and reduced-motion settings skip it.

While busy, Escape, the backdrop and the close button are ignored, as in Modal; busyOverlay also covers the body with a spinner. initialFocusRef picks the element focused on open; otherwise it is the one marked data-autofocus, else the first control (the Close button).

Props

  • busyboolean
    Default: false

    Ignore Escape, backdrop and close while an action runs.

  • busyOverlayboolean
    Default: false

    With busy, cover the body with a dimmed overlay and a spinner.

  • openboolean

    Whether the drawer is shown.

  • onClose() => void

    Called on Escape, backdrop click or the close button.

  • titleReactNode

    Header title.

  • side'right' | 'left' | 'top' | 'bottom'
    Default: 'right'

    Edge it opens from.

  • widthstring
    Default: 'max-w-md'

    Tailwind max-width class (left and right drawers).

  • heightstring
    Default: 'max-h-[60vh]'

    Tailwind max-height class (top and bottom drawers).

  • animatedboolean
    Default: false

    Slide in and out from its edge and fade the backdrop, instead of appearing at once.

  • paddedboolean
    Default: true

    Pad and scroll the body; false lets the content fill the drawer itself.

  • initialFocusRefRefObject<HTMLElement>

    Element to focus on open. Without it, focus goes to an element with data-autofocus, else the first control.

  • footerReactNode

    Footer actions.

  • childrenReactNode

    Content.

Related hooks and theme:useDialogFocususeEscapeKey