/ux
Components/Overlays/Drawer

Drawer

Overlays

Side-anchored panel that slides in from any edge.

Radix Dialog–based slide-in panel. Position can be left, right, top, or bottom. Sizes control width (left/right) or height (top/bottom). Compose from DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerTitle, DrawerDescription.

Usage

import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerBody } from "nosible-ux"
import { Button } from "nosible-ux"

export default function Example() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button intent="outline">Open drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Signal filters</DrawerTitle>
        </DrawerHeader>
        <DrawerBody>Filter controls go here</DrawerBody>
      </DrawerContent>
    </Drawer>
  )
}

Examples

Right drawer with footer actions

Bottom sheet

Accessibility

Focus is trapped inside the drawer. Escape closes and returns focus to the trigger. role="dialog" and aria-modal are applied.

Props

Name TypeDefaultDescription
asChild
boolean | undefined—
closeOnClickOutside
boolean | undefined—Close on click or pointer-down outside the panel. Default: `true`.
closeOnEscape
boolean | undefined—Close when the Escape key is pressed. Default: `true`.
forceMount
true | undefined—Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
onCloseAutoFocus
((event: Event) => void) | undefined—Event handler called when auto-focusing on close. Can be prevented.
onEscapeKeyDown
((event: KeyboardEvent) => void) | undefined—Event handler called when the escape key is down. Can be prevented.
onFocusOutside
((event: FocusOutsideEvent) => void) | undefined—Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
onInteractOutside
((event: PointerDownOutsideEvent | FocusOutsideEvent) => void) | undefined—Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
onOpenAutoFocus
((event: Event) => void) | undefined—Event handler called when auto-focusing on open. Can be prevented.
onPointerDownOutside
((event: PointerDownOutsideEvent) => void) | undefined—Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
position
"top" | "bottom" | "left" | "right" | undefined—Which viewport edge the drawer slides from. Default: `"right"`.
size
"sm" | "md" | "lg" | "xl" | "full" | undefined—Width (left/right) or height (top/bottom) tier. Default: `"md"`.
withCloseButton
boolean | undefined—Show the × close button. Default: `true`.
← All ComponentsGetting Started →