Modals & Dialogs

Modals are overlay windows requiring interaction before returning to main content, used for critical decisions and focused tasks.

stellae.design

Design Principles

Modals appear atop main content, dimming background and requiring interaction before proceeding. Use for: destructive confirmations, focused data entry, critical decisions, self-contained tasks. Avoid for: informational messages (toasts), lengthy forms (pages), non-critical choices (inline UI).

Why It Matters

Modals and dialogs are overlay patterns that demand user attention by interrupting the current workflow, making them among the most powerful and most frequently misused components in interface design. When used appropriately — for confirmations, critical warnings, or focused tasks that require immediate resolution — they prevent errors and streamline decision-making. When overused or implemented poorly, they create accessibility barriers, disrupt user flow, frustrate mobile users, and train people to dismiss important information without reading it.

Real-World Examples

GitHub's delete repository confirmation dialog

GitHub requires users to type the full repository name before the delete button becomes active, using a modal dialog that isolates this high-stakes, irreversible action from the rest of the settings page. The modal clearly states the consequences, prevents accidental confirmation with the typing requirement, and uses a red destructive button that is disabled until the confirmation text matches. This pattern is an exemplary use of a modal — it prevents a catastrophic error that cannot be undone.

Focused compose modal in email clients

Gmail's compose window opens as a modal-like overlay that provides a focused writing environment while keeping the inbox visible in the background for reference. Users can minimize, expand, or pop out the compose window, maintaining control over how much screen real estate the task occupies. The modal pattern here isolates the composition task without fully disconnecting the user from their inbox context.

Counter-example

Newsletter signup modal on page load

A blog displays a full-screen newsletter signup modal within three seconds of the user arriving, before they have read a single paragraph or demonstrated any interest in the content. The modal obscures the article entirely, has a tiny close button in the corner, and reappears on every subsequent page visit. Users learn to reflexively close any modal on this site, meaning even legitimate confirmation dialogs get dismissed without reading.

Role-Specific Guidance

Common Mistakes

• The most damaging mistake is using modals for non-urgent content like newsletter signups, promotional announcements, or cookie banners that interrupt the user's primary task and train them to dismiss overlays reflexively, reducing the effectiveness of all future modals including critical ones. Another frequent error is failing to implement proper focus management and keyboard support, which makes modals completely inaccessible to screen reader users and keyboard-only navigators — the modal may be visually present but functionally unreachable. Teams also commonly allow background scroll while a modal is open, causing users to lose their scroll position in the underlying page and feel disoriented when the modal closes.