Home/Patterns/Modal & sheet

Modal & sheet

Two overlay patterns: centered modal for short confirmations, side sheet for deeper edits without losing context. Five compositions covering both.

Stable 5 compositions
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.

Close shift S-2841?

This will reconcile cash and lock Till 02. You can’t reopen a closed shift — only the next day.

COMPOSITION 02

Destructive modal · with typed confirm

For irreversible actions — delete workspace, archive a year. 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.
● Permanent

Delete workspace Mukamba Group?

5 sites · 2,418 SKUs · 184 employees · 18,420 receipts. This can’t be undone. Type mukamba-group to confirm.

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.
Students · list behind

Edit · Tariro Moyo

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.

New supplier

Capture identity and KYC docs. Bank details can be added later.

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.
[ Audit log behind ]

Audit event · AUD-1842

Stanford Kudaeditedpour P-2840
Today 14:18:42 · ip 196.43.81.4
Before
Fineness: 95.0 %
Weight: 3.218 kg
After
Fineness: 94.7 %
Weight: 3.218 kg

Shared rules

What every composition obeys.

Do

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.

Do

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.