Density

Drawer

Drawer composes Base UI’s drawer primitives for panels that slide over the current screen.

import { Drawer } from "density-base-ui";

export default function DrawerExample() {
  return (
    <Drawer
      trigger="Open drawer"
      title="Filters"
      description="Refine visible rows by status, owner, and update time."
      actions={[{ label: "Apply filters", emphasis: "primary" }]}
    >
      <div className="drawer-example-grid">
        <span>Status</span>
        <strong>Open</strong>
        <span>Owner</span>
        <strong>Design</strong>
        <span>Updated</span>
        <strong>Today</strong>
      </div>
    </Drawer>
  );
}

Props

Prop Attribute Values Default
trigger None React node Required
title, description None React node None
children None React node None
actions None { label, emphasis? }[] Close
closeLabel None React node Close
presentation data-dn-presentation button button
emphasis data-dn-emphasis primary, secondary, outline, ghost Inherited
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl Inherited
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl xl
popupPresentation data-dn-presentation overlay overlay
depth data-dn-depth 1, 2, 3, 4, 5, 6, 7 1

Drawers are right-sided on desktop. Below 768px, every drawer becomes a bottom drawer and can be dismissed by dragging its handle; content remains available for normal scrolling and interaction.

Emphasis

import { Drawer } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

export default function DrawerEmphasisExample() {
  return (
    <ExampleRow>
      <Drawer trigger="Primary" emphasis="primary" />
      <Drawer trigger="Secondary" emphasis="secondary" />
      <Drawer trigger="Outline" emphasis="outline" />
      <Drawer trigger="Ghost" emphasis="ghost" />
    </ExampleRow>
  );
}

Size

import { Drawer } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

export default function DrawerSizeExample() {
  return (
    <ExampleRow>
      <Drawer trigger="2xs" size="2xs" />
      <Drawer trigger="xs" size="xs" />
      <Drawer trigger="sm" size="sm" />
      <Drawer trigger="md" size="md" />
      <Drawer trigger="lg" size="lg" />
      <Drawer trigger="xl" size="xl" />
      <Drawer trigger="2xl" size="2xl" />
      <Drawer trigger="3xl" size="3xl" />
    </ExampleRow>
  );
}

Content

import { Drawer } from "density-base-ui";

export default function DrawerContentExample() {
  return (
    <Drawer
      trigger="Open drawer"
      title="Title"
      description="Description"
      closeLabel="Dismiss"
    >
      <p>Children content</p>
    </Drawer>
  );
}

Actions

import { Drawer } from "density-base-ui";

export default function DrawerActionsExample() {
  return (
    <Drawer
      trigger="Open drawer"
      actions={[{ label: "Later" }, { label: "Save", emphasis: "primary" }]}
    />
  );
}

Padding

import { Drawer } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

export default function DrawerPaddingExample() {
  return (
    <ExampleRow>
      <Drawer trigger="None" padding="none" />
      <Drawer trigger="2xs" padding="2xs" />
      <Drawer trigger="xs" padding="xs" />
      <Drawer trigger="sm" padding="sm" />
      <Drawer trigger="md" padding="md" />
      <Drawer trigger="lg" padding="lg" />
      <Drawer trigger="xl" padding="xl" />
      <Drawer trigger="2xl" padding="2xl" />
      <Drawer trigger="3xl" padding="3xl" />
    </ExampleRow>
  );
}

Depth

import { Drawer } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";

export default function DrawerDepthExample() {
  return (
    <ExampleRow>
      <Drawer trigger="Depth 1" depth="1" />
      <Drawer trigger="Depth 2" depth="2" />
      <Drawer trigger="Depth 3" depth="3" />
      <Drawer trigger="Depth 4" depth="4" />
      <Drawer trigger="Depth 5" depth="5" />
      <Drawer trigger="Depth 6" depth="6" />
      <Drawer trigger="Depth 7" depth="7" />
    </ExampleRow>
  );
}