Components

Drawer

A drawer is a cover overlay from the right — the same modal contract as Dialog, not a push layout. It opens a task without losing the list behind the scrim. Persistent navigation is Side nav.

Anatomy

Moderation queue · 412 reviews · the list stays visible at 40% ink

Flag this review?

The organiser will not see it until you decide. This cannot be undone from the queue.

Same tokens as center Dialog: 40% ink scrim (z-overlay), panel at z-modal with hairline and shadow-overlay. Entry uses anim-slide-in-end — transform is allowed here because a side drawer is a sheet on another axis.

Specification

Property	Value	Why
Recipe	`dialog({ placement: 'side', size })`	One overlay language — drawer is Dialog on the right axis
Scrim	40% ink, `z-overlay`	Same as center Dialog — the page stays readable
Panel	`z-modal`, full height, rounded left only	Slides from the edge; top and bottom flush
Width	`size="sm"` 28rem · `md` 42rem · `lg` 1200px max	Reuses dialog size tokens — no new measures
Motion	`anim-slide-in-end`, 180ms	Transform allowed for sheets and drawers only
Push	Not supported	Push reflows the whole dashboard; cover keeps focus on the task

Structure

<!-- Radix Dialog with side placement — behaviour is Radix, classes are ours -->
<Dialog.Overlay class={d.overlay()} />
<Dialog.Content class={d.content({ placement: 'side', size: 'sm' })}>
  <Dialog.Title class={d.title()}>Flag this review?</Dialog.Title>
  <Dialog.Description class={d.description()}>
    The organiser will not see it until you decide.
  </Dialog.Description>
  <Dialog.Footer class={d.footer()}>
    <Button variant="secondary">Cancel</Button>
    <Button variant="destructive">Hide review</Button>
  </Dialog.Footer>
</Dialog.Content>

Props

Prop	Type	Default	Notes
`placement`	`'center' \| 'sheet' \| 'side'`	`'center'`	`sheet` is bottom (Capacitor). `side` is this drawer.
`size`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'sm'`	Sets max width on `side`; sets centered width on `center`
`scale`	`'md' \| 'sm'`	`'md'`	Tightens padding and type in dashboard contexts

Rules

Same modal contract as Dialog. Scrim, focus trap, Escape to close, focus returned to the trigger. Close on navigation — the reader asked for a page, not for the panel to stay open.
Title is a question. Confirm verb matches the title. Cancel is always "Cancel." — see Dialog copy contract.
Never push the page. If the layout must persist beside navigation, use Side nav expanded or rail mode.
Bottom sheet is not a side drawer. placement="sheet" stays on Capacitor and mobile filters; do not reuse it for moderation panels.

See also: Dialog (center and bottom sheet) · Motion (allowed transforms) · Layers (modal at 400)

Sporting Scouter Design System

Every token on this site is generated from theme.css.