A modal, edge-anchored surface for navigation, reference browsing, filters, or an extended task that needs more room than Dialog while keeping the page visible as context. Sheet is the component; drawer is its bottom-edge usage, with drag and snap behavior deferred to layer 2.
The right-side default with Sheet-owned chrome only: required title and close Button, optional description and footer, and an intentionally empty body so the surface itself stays under review.
Side communicates the Sheet's relationship to the obscured page; it does not change modal semantics or internal anatomy.
| Side | Modifier | Best fit | Demo |
|---|---|---|---|
| Right | --right | Application tasks and reference browsing; the default | |
| Left | --left | Transient application navigation | |
| Top | --top | Compact global controls or inspection | |
| Bottom | --bottom | The drawer pattern on narrow screens |
Standard preserves more of the page and fits ordinary navigation, filters, and application tasks. Wide spends half the viewport on source, data, or extended reference browsing, with the usable viewport as its narrow-screen cap.
| Size | Modifier | Best fit | Demo |
|---|---|---|---|
| Standard | — | Navigation, filters, and ordinary application tasks | |
| Wide | --wide | Source, data, and extended reference browsing |
A Sheet preserves page context; it does not excuse a workflow from choosing the right information boundary.
| Verdict | Rule |
|---|---|
| Do | Use Sheet for modal navigation, filters, reference browsing, or extended work that benefits from keeping the obscured page visible; keep short decisions in Dialog. |
| Do | Use standard for navigation, filters, and ordinary application tasks; use wide when source, data, or extended reference browsing materially benefits from half-viewport measure. |
| Do | Always place the persistent close Button in ds-sheet__actions. Put any compact task actions before it, with accessible names and Tooltips for icon-only actions. |
| Do | Keep the header and optional footer fixed and let only .ds-sheet__body scroll. |
| Do | Provide a persistent close Button, choose intentional initial focus, and return focus to the opening trigger after dismissal. |
| Do | Compose existing controls and navigation inside the surface; Sheet owns the layer, not child-component restyling. |
| Don’t | Create a parallel Drawer component — bottom is a Sheet side, while swipe, drag, snap points, and a grab handle require explicit layer-2 behavior. |
| Don’t | Nest modal layers or put a workflow that should own navigation history into a Sheet. |