Drawer

Patterns

Side Inspector

When to use:

• The user needs contextual details without leaving the page.

Composition notes:

• Keep the content contextual to the current selection.
• Name the drawer with a heading referenced by aria-labelledby so the inspector purpose stays obvious.

Trade-offs:

• Preserves context.
• Weaker for highly modal decisions.

import { useId, type CSSProperties } from 'react';
import {
  Badge,
  Button,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerTrigger,
  Heading,
  Icon,
  IconButton,
  Text,

Short Form Flow

When to use:

• A small edit or invite flow should stay attached to the page.

Composition notes:

• Keep actions reachable at the bottom.
• Do not let a short form silently grow into a full-page workflow.

Trade-offs:

• Less interruptive than a dialog.
• Easier to overload with too much content.

import { useId, useState, type CSSProperties, type FormEvent } from 'react';
import {
  Button,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerTrigger,
  Heading,
  HelperText,
  Icon,
  IconButton,
  Label,

Activity Panel

When to use:

• The content is long and secondary.

Composition notes:

• Use inner scrolling.
• Keep title and actions stable while the body scrolls.

Trade-offs:

• Good for logs and timelines.
• Needs careful viewport testing.

import { useId, type CSSProperties } from 'react';
import {
  Button,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerTrigger,
  Heading,
  Icon,
  IconButton,
  Text,
} from '@vega-ui/react';

Comparison

Quick Decision Rule

Choose Drawer when the task should stay closely connected to the current page context while still using an overlay.

Drawer vs Dialog

Use Drawer when:

• the task feels like a side panel
• the user benefits from keeping page context visible

Use Dialog when:

• the flow should feel more modal and bounded

Drawer vs Sheet

Use Drawer when:

• the panel should feel edge-mounted rather than bottom-sheet based
• desktop or wide-layout context should remain visible beside the panel

Use Sheet when:

• the UX is touch-first or sheet-like

Drawer vs Popover

Use Drawer when:

• the content is too large or task-heavy for a floating popover

Use Popover when:

• the content is brief and contextual

Choose This Component When

• a side panel fits the task
• preserving page context matters
• the content is bigger than a popover but less modal than a dialog
• the panel should read like workspace chrome rather than a transient menu

Do Not Choose This Component When

• the flow is a short confirm modal
• the content is small and contextual
• the layout would become a cramped pseudo-page

Troubleshooting

Actions Scroll Out Of View

Symptom

The user cannot reach important actions easily in long drawer content.

Likely Cause

The drawer body has no deliberate scroll strategy.

How To Verify

• Test the drawer on shorter viewports.
• Add realistic long content.

Fix

• Make the inner content scrollable.
• Keep key actions outside the scrolling body when possible.

Nested Drawers Feel Unstable

Symptom

Focus restoration or dismissal feels inconsistent with nested drawers.

Likely Cause

Nested drawers were not tested as one overlay stack.

How To Verify

• Open parent and nested drawers.
• Close them in reverse order.

Fix

• Keep the standard part structure.
• Retest the full overlay stack.

Drawer Feels Like The Wrong Pattern

Symptom

The drawer works technically, but the UX feels overly large or indirect.

Likely Cause

The flow is actually closer to a modal dialog or a small popover.

How To Verify

• Review the amount of content and task criticality.

Fix

• Switch to Dialog or Popover when they better match the job.