Skip to content
Yuzur1ha Open

Component referenceDraft

Drawer

Drawer provides a titled surface from the left, right or bottom edge with dialog focus management.

Updated

Design notes

The header and footer stay outside the flexible body. Use headerContent for a second header row and avoid competing nested scroll containers.

Playground

Playgrounddemo.tsx
Placement
No changes saved.

content/components/drawer/demo.tsx

import { useState } from "react"
import { Button, Drawer, DrawerClose, TextField, Segmented } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"
export function DrawerDemo() {
  const [side, setSide] = useState<"left" | "right" | "bottom">("right")
  const [name, setName] = useState("Alex Morgan")
  const [saved, setSaved] = useState("No changes saved.")
  return (
    <>
      <Segmented
        label="Placement"
        value={side}
        onChange={setSide}
        options={[
          { value: "left", label: "Left" },
          { value: "right", label: "Right" },
          { value: "bottom", label: "Bottom" },
        ]}
      />
      <Drawer
        trigger={<Button>Open drawer</Button>}
        title="Edit profile"
        description="Keep your profile up to date."
        closeLabel="Close drawer"
        side={side}
        footer={
          <DrawerClose asChild>
            <Button onClick={() => setSaved(name)}>Save changes</Button>
          </DrawerClose>
        }
      >
        <TextField
          label="Display name"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </Drawer>
      <DemoResult>{saved}</DemoResult>
    </>
  )
}

API

Drawer

A modal dialog that slides from one edge. Content is portalled with focus management and page scroll locking. Native dialog-content attributes are forwarded.

DrawerProps
PropertyTypeRequiredDefaultDescription
openbooleanNo—Controlled open state. Pair with onOpenChange.
defaultOpenbooleanNo—Initial open state when open is omitted.
onOpenChange((open: boolean) => void)No—Called when opening or closing is requested.
triggerReactElementYes—One ref-capable action element used as the drawer trigger.
titlestringYes—Accessible dialog title, rendered in the header.
descriptionstringNo—Optional accessible description rendered below the heading.
closeLabelstringYes—Accessible name for the built-in close action.
side"left" | "right" | "bottom"No"right"Screen edge from which the drawer opens.
headerActionsReactNodeNo—Additional actions placed beside the built-in close button.
headerContentReactNodeNo—Additional header content beneath the title/action row.
bodyClassNamestringNo""Classes applied to the scrollable drawer-body wrapper.
footerReactNodeNo—Optional footer rendered after the body.
childrenReactNodeNo—Content rendered inside the component.
forceMounttrueNo—Keep the Radix content mounted for externally managed visibility or animation. The consumer must manage its closed presentation.
onEscapeKeyDown((event: KeyboardEvent) => void)No—Called before Escape dismisses the surface; prevent default to keep it open.
onPointerDownOutside((event: CustomEvent<{ originalEvent: PointerEvent; }>) => void)No—Called for a pointer press outside the content; prevent default to cancel dismissal.
onFocusOutside((event: CustomEvent<{ originalEvent: FocusEvent; }>) => void)No—Called when focus moves outside the content; prevent default to cancel the associated outside interaction.
onInteractOutside((event: CustomEvent<{ originalEvent: PointerEvent; }> | CustomEvent<{ originalEvent: FocusEvent; }>) => void)No—Called for pointer or focus interaction outside the content; prevent default to cancel dismissal.
onOpenAutoFocus((event: Event) => void)No—Called before focus enters opened content; prevent default to choose the focus target.
onCloseAutoFocus((event: Event) => void)No—Called before focus returns after closing; prevent default when navigation manages focus.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLDivElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.

DrawerClose

Closes the nearest matching overlay. Use asChild with one ref-capable action element, or render the default native button.

ComponentPropsWithRef<typeof DrawerClose>
PropertyTypeRequiredDefaultDescription
asChildbooleanNofalseRender through one child element instead of the default element. The child must forward its ref and accept the supplied props.
childrenReactNodeNo—Content rendered inside the component.
disabledbooleanNo—Disables the native control.
onClickMouseEventHandler<HTMLButtonElement>No—Native activation handler.
classNamestringNo—Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLButtonElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.