Components

Drawer

A panel that slides in from the edge or the bottom to show details, filters or a sub-form without leaving the page.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

The panel comes from the inline end: from the right in left-to-right text, from the left in right-to-left text. Swipe it towards its edge, press Escape or press the backdrop to close it.

import { Button, Drawer } from '@bigbang/ui';

export default function Default() {
  return (
    <Drawer
      trigger={<Button variant="secondary">Open panel</Button>}
      title="Panel title"
      description="Panel description goes here."
      footer={
        <Drawer.Close>
          <Button>Apply</Button>
        </Drawer.Close>
      }
    >
      Panel content goes here. The page stays visible behind it.
    </Drawer>
  );
}

Bottom

side="bottom" opens a bottom sheet (handle adds a grab bar, snapPoints adds resting heights); swipe it down to close it. Below 640 px every drawer becomes a bottom sheet.

import { Button, Drawer } from '@bigbang/ui';

export default function Bottom() {
  return (
    <Drawer
      side="bottom"
      handle
      trigger={<Button variant="secondary">Open from bottom</Button>}
      title="Panel title"
      footer={
        <Drawer.Close>
          <Button>Apply</Button>
        </Drawer.Close>
      }
    >
      Panel content goes here. The page stays visible behind it.
    </Drawer>
  );
}

modal={false}: there is no backdrop, focus is not trapped and the page stays usable. For panels used together with the page, such as filters.

import { Button, Checkbox, Drawer } from '@bigbang/ui';

export default function NonModal() {
  return (
    <Drawer
      modal={false}
      size="sm"
      trigger={<Button variant="secondary">Non-modal panel</Button>}
      title="Panel title"
      footer={
        <Drawer.Close>
          <Button>Apply</Button>
        </Drawer.Close>
      }
    >
      <div className="flex flex-col gap-md">
        <Checkbox label="First item" />
        <Checkbox label="Second item" />
      </div>
    </Drawer>
  );
}

Sides

start and end follow the text direction and become a bottom sheet below 640 px; top drops from the top edge.

Live example, StorybookOpen in Storybook

With parts

Drawer.Root draws the same panel; you place the title, body and actions with Drawer.Header, Drawer.Title, Drawer.Description, Drawer.Body and Drawer.Footer.

Live example, StorybookOpen in Storybook

Light and dark mode

The panel uses color-surface-raised with a color-border-subtle line; an end drawer also takes the shadow-panel shadow. The bottom sheet handle uses color-surface-layer-2.

import { Button, Drawer } from '@bigbang/ui';

export default function Default() {
  return (
    <Drawer
      trigger={<Button variant="secondary">Open panel</Button>}
      title="Panel title"
      description="Panel description goes here."
      footer={
        <Drawer.Close>
          <Button>Apply</Button>
        </Drawer.Close>
      }
    >
      Panel content goes here. The page stays visible behind it.
    </Drawer>
  );
}