Design System/Atoms/Drawer

Drawer

Bottom sheet panel that slides up from the screen edge — ideal for mobile-first interactions and contextual actions.

When To Use

  • Use Drawer when content needs to appear in context without forcing a full page transition.
  • Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
  • Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

  • Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
  • Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Key exports

DrawerRoot, DrawerTrigger, DrawerPortal, DrawerClose, DrawerOverlay, DrawerContent

Example Code

import {
  Drawer, DrawerTrigger, DrawerContent,
  DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose,
} from "@hilum/ui"
import { Button } from "@hilum/ui"

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit profile</DrawerTitle>
      <DrawerDescription>Update your name and bio.</DrawerDescription>
    </DrawerHeader>
    <div className="flex flex-col gap-4 px-6 pb-2">
      <div>
        <p className="label text-ground-500 mb-1.5">Name</p>
// ...trimmed for docs

Variants

Basic drawer

Form fields with cancel and save actions

Confirmation drawer

Destructive action with a warning icon and clear consequence messaging

Shopping cart drawer

Line items with subtotal and a full-width checkout CTA