ds
Components
Drawer

Drawer

A side sheet on the dialog element, for detail and edit.

Code

<dialog class="drawer" aria-labelledby="dr-t">
  <div class="drawer-head">
    <div><span class="label">Run #4812</span><h4 id="dr-t">load_orders</h4></div>
    <span class="badge down">Failed</span>
    <button class="btn icon sm ghost" aria-label="Close">…</button>
  </div>
  <div class="drawer-body">…</div>
  <div class="drawer-foot">…</div>
</dialog>

A side sheet for the detail of one row, or a short edit, while the list stays in view behind it. It is a native dialog opened with showModal(): focus moves in and stays in, Escape closes, and the page behind is inert. Head and foot stay put; only the body scrolls.

Anatomy

Run #4812

load_orders

Failed

Started: 12 Oct 2026, 09:15:02
Duration: 4m 12s
Worker: pool-b-7f9c
Attempt: 3 of 3

AccessDenied on s3://acme-raw/orders/2026-10-12/. The role lost s3:GetObject at 09:02.

Note for the team

Code

<!-- The same markup, drawn in place for this page. -->

Sizes and sides

.sm is 22rem for a quick look, the default 28rem fits a form, .lg is 42rem for logs or a diff. .left slides in from the left, for navigation on small screens. On a phone every size is the full width.

API

Class	On	What it does
`.drawer`	dialog	The sheet, full height on the right. `--w` sets the width.
`.sm / .lg`	.drawer	22rem and 42rem.
`.left`	.drawer	From the left edge.
`.drawer-head`	div	Title block, then badges, then the close button.
`.drawer-body`	div	Scrolls. Children are spaced 1.25rem apart.
`.drawer-foot`	div	Actions on the right; a .danger button first goes to the left.

Drawers for detail and quick edits next to a list.
The primary action last, on the right.
A URL that opens the same drawer, so it can be shared.

Don't

Flows of several steps. Use a page.
A drawer on top of a drawer.
Closing on a click outside when there are unsaved changes.

Accessibility

Name the dialog with aria-labelledby pointing at its title.
On close, focus returns to the button that opened it. showModal() and close() do that for you.