Modal Dialog
also known asdialog · popup · overlay · lightbox
A focused overlay that interrupts the page to confirm an action, collect input, or surface critical information.
A modal dialog is an overlay that sits above the page content, dims or blurs the background, and traps focus until dismissed. It interrupts the user's flow — which is why it should be used sparingly, only for actions that genuinely need acknowledgment or focused input.
The modern modal has a centered card (max ~520px wide), a clear title, optional supporting text, and 1–2 action buttons aligned to the right. Destructive actions use a red primary button; constructive ones use brand color. The dismissal `×` sits top-right, and `Esc` should always close the modal.
A properly built modal traps keyboard focus, returns focus to the triggering element on close, and uses `<dialog>` or an ARIA-correct equivalent. Done badly, modals are accessibility disasters; done right, they're the most reliable way to get a user's full attention.
- Destructive confirmations (delete, archive, leave unsaved)
- Quick forms that don't justify a full page (invite user, edit profile)
- Critical information requiring acknowledgment
- Non-critical confirmations — use a toast
- Long forms — use a dedicated page
- Onboarding tours — use coachmarks or a side panel
- +Trap focus inside the modal until it closes
- +Bind `Esc` to close and click-outside to dismiss (for non-destructive modals)
- +Use `<dialog>` element or proper ARIA roles
- +Color the primary button by intent (red = destructive, brand = constructive)
- −Don't stack modals — never open one modal on top of another
- −Don't use modals for marketing — they're hated
- −Don't auto-open modals on page load except for critical legal acknowledgments
People also ask
Should I use the native HTML `<dialog>` element?
Yes when you can — it gives you focus trapping, `Esc` handling, and backdrop styling for free via `::backdrop`. Browser support is excellent in 2025+. Headless libraries like Radix or React Aria are good fallbacks if you need cross-browser polish.