| UI or UX | UI + UX - Adaptive temporary sheet for a context-bound child task | UI + UX - Supplemental edge panel for current-context detail or light actions | UI + UX - Focused modal task layer | UI + UX - Blocking urgent-response modal |
| UI guidance | Render a sheet as a titled adaptive surface with clear edge or window attachment, visible close or back controls, stable actions, and sizing that matches the task. | Render a drawer as an edge-aligned panel with a visible heading, selected-object identity, close control, stable width, and clear relationship to the page content it supplements. | Render a titled layer above a dimmed or otherwise unavailable page, with clear task content, named actions, visible close or cancel affordance, and stable scroll boundaries. | Render an alert dialog as a modal response surface with a condition-specific title, consequence text, role alertdialog or platform equivalent, inactive background, and buttons labelled by outcome. |
| UX guidance | Use sheets for short child tasks that need more room than a dialog while preserving parent context after the task closes. | Use drawers to preserve parent-page context while users inspect supplemental detail or perform simple adjacent actions. | Use the modal interruption only for compact tasks that genuinely need temporary focus before the user returns to the page. | Interrupt only when a current-workflow condition needs an explicit response before users can safely continue. |
| Good UI | A review follow-up sheet opens from a claim row with the title Schedule follow-up for Claim C-1042, fields, close control, compact and expanded sizes, and sticky Save and Cancel actions. | A right-side case details drawer opens from a table row, names Claim C-1042, shows status, owner, activity, and a close button while the table remains visible. | Account settings opens in a titled dialog with one display-name field, Save, Cancel, close control, and dimmed inactive page context. | A Session locked alert dialog says the editor is paused because the account opened elsewhere, offers Stay signed in and Sign out, and keeps the background editor unavailable. |
| Bad UI | A panel titled Sheet opens with no selected object, no close affordance, and hidden actions below an inner scroll area. | A panel slides over the table with the title Details, no close control, and no selected record name. | A vague popup titled Popup floats over active page controls and offers only OK. | A popup says Warning with only OK while the page behind it still accepts input. |
| Good UX | Opening the sheet focuses the first useful field, expanding the sheet preserves typed notes, Escape triggers discard review when edits are dirty, and Save returns focus to the claim row. | Opening the drawer preserves the table filter and selected row, Next item updates the drawer title, Escape closes it, and focus returns to the selected row. | Opening moves focus to the display-name field, Tab remains inside the layer, Escape cancels, and closing returns focus to Open dialog. | Tab stays inside the dialog, Escape follows the safe cancel path, Stay signed in returns focus to the editor, and Sign out moves to the signed-out state. |
| Bad UX | A user changes the appointment note, presses back, and loses the work without a decision point. | The drawer keeps showing Claim C-1042 after the user selects Claim C-1043 in the table. | Users can click background Delete or Navigate controls while the modal is still open. | Users can click Delete, navigate away, or keep typing behind a blocking security message. |
| Best fit | A user starts a short context-bound task that needs more room than a dialog but should not become a full page. | Users need to inspect object detail, metadata, comments, history, or light actions while staying on the current page. | A short task must interrupt normal page interaction but should return users to the same context afterward. | An urgent current-workflow condition requires acknowledgement, cancellation, retry, sign-out, review, or another explicit response before continuation. |
| Avoid when | The content is mainly destination navigation. | The surface is mainly app navigation or destination switching. | The content is only informational and does not require blocking the page. | The message is urgent but users can keep working safely after seeing it. |
| Required state | Closed parent state with an opener tied to the object, field, or task that launches the sheet. | Closed state with a clear opener tied to a specific object or page section. | Closed page state with an obvious invoking control. | Normal workflow state with a visible invoking event or system condition. |
| Accessibility burden | Give the sheet a visible heading and use it as the accessible name. | Give the drawer a visible heading and expose it as the accessible name for the region or dialog-like surface. | Use dialog semantics with an accessible name from the visible title. | Use alertdialog semantics only for important modal messages that require a response. |
| Common misuse | Using a sheet as a catch-all panel for navigation, filters, help, settings, and unrelated actions. | Using a drawer as an unlabeled junk panel for unrelated commands, navigation, filters, and help. | Using a modal as a generic container for routine information that could stay inline. | Using an alert dialog as a dramatic version of a routine non-modal alert. |