Drawer

A modal panel that slides in from an edge of the viewport, for details or a task beside the page, with a header, a body that scrolls and a footer. side="bottom" is a bottom sheet.

Client componentEngine: react-aria

Import

import { Drawer } from '@nizivo/react/drawer';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/icon-button.css
import '@nizivo/react/css/drawer.css';

Client. It is the Dialog's engine at an edge: @nizivo/react/drawer measures 31.7 KiB gzip with React Aria inside, almost all of it shared with Dialog (size-limit, all locales; packages/react/SIZES.md). How to choose.

Sides

Drawer.Popup takes side:

end (the default): the right edge in a left-to-right page, the left edge in a right-to-left one. This is Figma's Drawer: 440 px wide, the full height, rounded on its two inner corners.
start: the opposite edge.
bottom: a bottom sheet, the full width and as tall as its content, rounded on its top corners. It is the "More" sheet AppShell will open below 640 px.

data-side on the popup (and its positioner) is the physical edge it sits at: right, left or bottom. A narrow viewport keeps a 3rem strip of the scrim beside (or above) the drawer, so there is always somewhere to press to close it. Set --nz-drawer-width for another width, and --nz-drawer-radius and --nz-drawer-bg to restyle the panel.

Motion

The drawer slides its whole width (or height) in from its edge on duration/slow with easing/enter, and out on duration/base with easing/exit; the scrim only fades. Under reduced motion (prefers-reduced-motion: reduce or [data-nz-motion="reduce"]) it does not slide: it only fades, in 120 ms.

Parts

Drawer.Header holds the title and, under it, a description or badges, above a rule. Drawer.Body is the only scroller, and fills the height between the header and the footer. Drawer.Footer holds the actions, which share its width, above a rule.

<Drawer.Close /> with no render and no children is an IconButton (tertiary, md) showing the close glyph, named "Close". Placed as a direct child of Drawer.Popup, it sits in the header's end corner, where Figma draws the close glyph, and the header leaves room for it. With children it is a plain button; with render, your element, for example render={<Button>Cancel</Button>}.

Focus return

As the Dialog's: returnFocus on Drawer.Root (an element ref or a function that returns one, while it is on the page), else the trigger, else the trigger of the overlay the drawer was opened from, else <body> with a development warning. returnFocus={false} leaves focus alone.

Inside other overlays

A Drawer opened from a Dialog, or a Dialog opened from a Drawer, adds no second scrim; the one underneath is marked data-nested-open. A Popover, Select, Menu or Tooltip opened inside a Drawer portals into it and paints above it. Escape and a press outside close only the topmost overlay, and the page stays scroll-locked until the last one closes.

Examples

Basic

Figma's Drawer (756:1001): an order's details from the end edge, with a header, a body that scrolls, and a footer whose two actions share its width. The bare Drawer.Close is the header's close IconButton, named "Close".

import type { JSX } from 'react';
import { Badge } from '@nizivo/react/badge';
import { Button } from '@nizivo/react/button';
import { Drawer } from '@nizivo/react/drawer';

export function DrawerExample(): JSX.Element {
  return (
    <Drawer.Root>
      <Drawer.Trigger render={<Button variant="secondary">View order</Button>} />
      <Drawer.Popup>
        <Drawer.Header>
          <Drawer.Title>Order #1042</Drawer.Title>
          <Drawer.Description>
            <Badge tone="success">Paid</Badge> <Badge tone="warning">Unfulfilled</Badge>
          </Drawer.Description>
        </Drawer.Header>
        <Drawer.Close />
        <Drawer.Body>
          <p>2 × Stoneware mug, 1 × Linen tea towel.</p>
          <p>Ship to Asha Rao, 14 Lake Road, Pune.</p>
        </Drawer.Body>
        <Drawer.Footer>
          <Button>Print label</Button>
          <Button variant="primary">Fulfil order</Button>
        </Drawer.Footer>
      </Drawer.Popup>
    </Drawer.Root>
  );
}

Sheet

The bottom sheet, as AppShell's "More" sheet below 640 px: as tall as its content, the full width, open on the server (closed and server-open overlays both emit no popup HTML, §12.2 SSR).

Source only

It opens on page load (defaultOpen), which would move focus on this page, so it is shown as source only.

import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { Drawer } from '@nizivo/react/drawer';

export function DrawerSheetExample(): JSX.Element {
  return (
    <Drawer.Root defaultOpen>
      <Drawer.Trigger render={<Button variant="secondary">More</Button>} />
      <Drawer.Popup side="bottom">
        <Drawer.Header>
          <Drawer.Title>More</Drawer.Title>
        </Drawer.Header>
        <Drawer.Close />
        <Drawer.Body>
          <a href="#marketing">Marketing</a>
          <a href="#discounts">Discounts</a>
          <a href="#settings">Settings</a>
        </Drawer.Body>
      </Drawer.Popup>
    </Drawer.Root>
  );
}

Parts

Use the parts through the namespace (Drawer.Root) or by their flat names (DrawerRoot); both work from Server Components.

Drawer.Root

Client component Renders no element of its own. Props: DrawerRootProps. Source: src/drawer/drawer.client.tsx.

Name	Type	Default	Description
`children`required	`ReactNode`	–
`defaultOpen`	`boolean`	–
`onOpenChange`	`(open: boolean, details: ChangeDetails<OpenReason>) => void`	–	`details.reason` is `'unknown'` with React Aria, which reports no cause.
`open`	`boolean`	–
`returnFocus`	`ReturnFocusTarget`	`true`	Where focus goes when the drawer closes (§12.2 Focus return), as `Dialog.Root`'s: the trigger, else the trigger of the overlay it was opened from, else `<body>` with a development warning; an element ref or a function returning one goes first; `false` leaves focus alone.

Drawer.Trigger

Without render, its own <button> with nz-hit-target and, from drawer.css, a 24 x 24 px minimum (WCAG 2.2 2.5.8, as the Dialog's, M27). A composed Button or IconButton keeps its own size.

Client component Renders data-slot="drawer-trigger" with the class nz-drawer-trigger. Props: DrawerTriggerProps. Source: src/drawer/drawer.client.tsx.

Name	Type	Default	Description
`children`	`ReactNode`	–
`render`	`RenderProp<DrawerTriggerState>`	–	Must render a `<button>`, for example `render={<Button>View order</Button>}`.

Also takes every attribute of <button> except children. (Omit<ComponentPropsWithRef<"button">, "children">)

render takes an element, or, in client code, a function of the props and this state (DrawerTriggerState):

Name	Type	Default
`disabled`required	`boolean`	–
`focusVisible`required	`boolean`	–
`open`required	`boolean`	–
`pressed`required	`boolean`	–

Client component Renders data-slot="drawer-popup" with the class nz-drawer-popup. Props: DrawerPopupProps. Source: src/drawer/drawer.client.tsx.

Name	Type	Default	Description
`backdrop`	`boolean`	–	The scrim element. Defaults to on for the root modal and off when opened from another modal.
`children`required	`ReactNode`	–
`container`	`Element \| null`	–	Portal container. Defaults to the parent overlay, else `document.body` (§12.1 L2).
`side`	`DrawerSide` `"start""end""bottom"`	`'end'`	The edge it slides in from.

Also takes every attribute of <div> except children, role. (Omit<ComponentPropsWithRef<"div">, "children" | "role">)

Figma's Header frame: the title, an optional description and badges, above a 1 px rule.

Client component Renders data-slot="drawer-header" with the class nz-drawer-header. Props: DrawerHeaderProps. Source: src/drawer/drawer.client.tsx.

Name	Type	Default	Description
`render`	`RenderProp<Record<string, never>>`	–

Also takes every attribute of <div>. (ComponentPropsWithRef<"div">)