Side-opening drawer with a sticky action row. The most common drawer shape in admin tools: header names the task, body scrolls the form, footer pins Cancel/Save so they stay reachable without scrolling.
When to use
Create/edit flows that fit in one screen's worth of fields. A modal is fine for
2–3 fields, a full page for 20+ fields. The drawer occupies the middle ground and
keeps the list context visible behind it.
Simple create form
3–5 fields with primary + cancel actions. The default shape for "+ New X" triggers.
Edit form with destructive action
Edit drawers pair a primary action with a destructive one in the footer. Delete sits on the left, Save on the right — separated by the spacer.
Quarterly planning doc
Long form — scroll body, sticky footer
The footer stays visible even when the form body overflows. This is why the sticky-footer pattern matters — users shouldn't have to scroll to find "Save".
The footer is opt-in — drawer-ui only mounts a footer slot when the author supplies one. Drawers without forms shouldn't add an empty one.
For a single right-aligned action cluster, wrap the buttons in <span slot="action"> — drawer's footer CSS self-aligns the slot to the end, no spacer needed.
For a dual cluster (destructive action on the left + primary on the right), pair <span slot="action-leading"> with <span slot="action">. The leading slot gets margin-inline-end: auto and pushes the trailing cluster to the opposite edge — no spacer required.
Primary action last (right-most) — follows OS conventions.
Wire close via onclick="this.closest('drawer-ui').open=false" on Cancel and on successful submit.
If the form has unsaved changes, trap close via the close event and show a confirm — don't rely on the user remembering.