Modal & sheet

Superseded by Bottom sheet

The desktop adaptation of .x-bottom-sheet is the canonical centred-dialog. Reach for Bottom sheet for new work; .modal-card and .modal-window are kept as backwards-compat aliases through v0.6. See reuse audit D-1.

Two overlay patterns: centered modal for short confirmations, side sheet for deeper edits without losing context. Five compositions covering both. Going forward, use Bottom sheet as the single canonical overlay primitive.

Stable 5 compositions

Shell at every breakpoint

The overlay reflows by viewport — bottom-anchored on mobile, centred on tablet, side-anchored or centred on desktop. Greyscale wireframes — structure only.

Mobile · bottom sheet

Tablet · centred modal

Desktop · side sheet

Live examples

Where to see this shell in action — reference docs, cookbook recipes, and live demos.

REFERENCE Bottom sheet The canonical successor — one component, two layouts. Open reference → COOKBOOK Autosave drawer Side-sheet recipe with autosave + dirty-state handling. Open recipe → KIT · LIVE Employee detail Modals and side sheets used inside a shipped kit. Open live →

COMPOSITION 01

Confirm modal · standard

Title + body + Cancel/Primary buttons. The lightest pattern.

Use whenThe action is reversible but the operator should pause to confirm — close shift, archive record, send broadcast.

COMPOSITION 02

Destructive modal · with typed confirm

For irreversible actions. Requires typing the record name to confirm.

Use whenThe action is permanent or deletes data. Typing the name forces the operator to read the warning.

COMPOSITION 03

Side sheet · quick edit

Slides from the right. Lets the operator edit a record without leaving the list.

Use whenThe operator is in a list and wants to edit one row's details without losing list context. Single-record edits.

COMPOSITION 04

Modal · embedded form

The new-record dialog. More form fields than a confirmation; fewer than a full page.

Use whenCreating a small new record from inside a list — supplier, vehicle, payment method.

COMPOSITION 05

Side sheet · audit detail

Read-only sheet showing the diff for a single audit event.

Use whenThe operator clicks an audit row to inspect what changed. Read-only, no edit.

Shared rules

What every composition obeys.

Reach for a modal when the user must respond. Anything optional belongs in a sheet or inline.

Don't

Stack a modal on top of another modal. If you need two decisions, redesign the flow.

Use a sheet when the list context must stay visible.

Don't

Make a sheet wider than 540 px. Past that, use a full detail page.