amezquita design systemGet started

Composition

Drawer

Side-anchored slide-in panel for supplemental content or secondary navigation

Markdown version for agents

Import
import { Drawer } from '@amezquita/design-system/components/composition/Drawer'

Live render

    Props

    PropTypeDescription
    open?boolean
    onOpenChange?(open: boolean) => void
    defaultOpen?boolean
    trigger?React.ReactElementMust be a single DOM element — React.Fragment is not supported (Radix asChild).
    titlestring
    description?string
    childrenReact.ReactNode
    footer?React.ReactNode
    side?'right' | 'left' | 'bottom'
    size?'sm' | 'md' | 'lg' | 'full'
    modal?boolean
    onPointerDownOutside?(e: Event) => voidCall e.preventDefault() to prevent the drawer from closing on outside click.
    onEscapeKeyDown?(e: KeyboardEvent) => voidCall e.preventDefault() to prevent the drawer from closing on Escape key.

    Tokens

    TokenTypeValue
    --drawer-close-align-offsetdimension2px
    --drawer-close-sizedimension28px
    --drawer-max-height-fulldimension100vh
    --drawer-max-height-lgdimension75vh
    --drawer-max-height-mddimension90vh
    --drawer-max-height-smdimension40vh
    --drawer-max-width-lgdimension640px
    --drawer-max-width-mddimension480px
    --drawer-max-width-smdimension320px

    Usage example

    tsx
    () => {
  const [open, setOpen] = useState(false)
  return (
    <Drawer
      open={open}
      onOpenChange={setOpen}
      trigger={<Button onClick={() => setOpen(true)}>Open drawer</Button>}
      title="Settings"
      description="Configure your preferences below."
      footer={
        <>
          <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
          <Button onClick={() => setOpen(false)}>Save changes</Button>
        </>
      }
    >
      <p style={{ margin: 0, color: 'var(--color-text-secondary)', fontSize: 'var(--font-size-sm)' }}>
        Drawer body content goes here.
      </p>
    </Drawer>
  )
}