← Vois design previews
Components · Job 3 · Focused overlay

Dialog vs Sheet vs Drawer

Same content, three shells. Dialog feels disconnected from the triggering data; Sheet preserves spatial proximity to the row/item that opened it; Drawer is the full-height mobile action-sheet equivalent.

Dialog · short, self-contained task

Centered, floats above everything. Use when the task has no relationship to a specific item on the page.

Sheet · contextual to one item

Slides in from the edge, partial overlap — the list stays visible behind it.

Drawer · mobile action-sheet

Full-width, rises from the bottom. The default overlay shell on small viewports.

States · same footer, different moments

Disabled · required field not filled

Primary action stays disabled until required fields are valid, not clickable-then-erroring.

Busy · save in progress

Whole form disables while the save is in flight — not just the button that was clicked.

Error · save failed
Couldn't save changes. Check your connection and try again.

Input stays editable and the entered value is preserved — a failed save never discards what the user typed.

Edit profile

Self-contained task with no anchor to a specific row.

Invoice #4021

Opened from a specific table row — the table stays visible to its left.

Filters

Mobile action-sheet equivalent — never used for text-heavy input that needs a keyboard.