--- title: "Dialog UI: anatomy, variants and examples | Kombai" description: "A dialog opens a window above the page that asks for a decision or a few details before people go on." canonical_url: https://kombai.com/glossary/dialog/ author: "The Kombai Team" --- # Dialog A dialog opens a window above the page that asks for a decision or a few details before people go on. - Also called: modal, popup, alert - Platforms: Web, Mobile - In the Kombai gallery: [125 web designs](https://kombai.com/gallery/web/dialog/), [135 mobile designs](https://kombai.com/gallery/mobile/dialog/) - [Duskwell](https://kombai.com/gallery/inspirations/dialog-web-54/) (Web) - [Roamside](https://kombai.com/gallery/inspirations/dialog-ios-27/) (Mobile) - [Maltwren](https://kombai.com/gallery/inspirations/dialog-ios-41/) (Mobile) ## What is a dialog? A dialog is a window that opens on top of the current screen and asks for a decision or a few details. A scrim dims the content behind it, and that content stays out of reach until people answer, cancel or close the dialog. When it closes, they are back where they started. - A title names the decision, and the buttons name the outcomes, like Delete or Keep editing. - Keyboard focus moves into the dialog when it opens and stays there until it closes. ## When to use dialog - **A decision before going on.** Confirming something that can't be undone, like deleting an account. - **A short, focused task.** Renaming, inviting or creating something with a few fields. - **Something people must answer.** A permission request or a blocking problem that needs a response. ## When not to use one - **Information with no decision.** A dialog interrupts. Use a toast or an inline message instead. - **Long or multi-step tasks.** Give them their own page or a full screen overlay. - **Everyday actions people can undo.** Act right away and offer Undo, rather than asking first. ## Anatomy 1. **Scrim**: Dims and blocks the page 2. **Title**: Names the decision 3. **Body**: Says what will happen 4. **Actions**: Cancel and the main action 5. **Close button**: A way out that changes nothing 6. **States**: Closed, open, focus, busy ## Variants We sorted every dialog design in the Kombai gallery and found six patterns. ### 1. Confirmations Two buttons that ask people to confirm a choice before it goes through, like applying edits or checking a drop-off point. - [Skellmoor Mark Studio](https://kombai.com/gallery/inspirations/dialog-web-115/) (Web) - [Neapford](https://kombai.com/gallery/inspirations/dialog-ios-97/) (Mobile) - [Log out](https://kombai.com/gallery/inspirations/dialog-ios-10/) (Mobile) ### 2. Destructive confirms A red button for deletes and removals that can't be undone. Some ask people to type a word before the button works. - [Neapwell](https://kombai.com/gallery/inspirations/dialog-web-4/) (Web) - [Jorvane](https://kombai.com/gallery/inspirations/dialog-ios-52/) (Mobile) - [Kelverne](https://kombai.com/gallery/inspirations/dialog-web-73/) (Web) ### 3. Form dialogs A few fields to create, rename or set up something, with Cancel and a submit button that names the result. - [Lehrgate Console](https://kombai.com/gallery/inspirations/dialog-web-27/) (Web) - [New folder alert](https://kombai.com/gallery/inspirations/dialog-ios-16/) (Mobile) - [Cairnstone](https://kombai.com/gallery/inspirations/dialog-web-2/) (Web) ### 4. Upsells and paywalls A locked feature or a better plan, offered at the moment someone reaches for it, with a quiet way to say no. - [Ellwick](https://kombai.com/gallery/inspirations/dialog-web-97/) (Web) - [Overleap](https://kombai.com/gallery/inspirations/dialog-ios-23/) (Mobile) - [Waggleroom](https://kombai.com/gallery/inspirations/dialog-ios-69/) (Mobile) ### 5. Permission and opt-in prompts A short reason, often with an illustration, for turning on notifications, location or access to another app. - [Jonquil](https://kombai.com/gallery/inspirations/dialog-web-59/) (Web) - [Study reminders](https://kombai.com/gallery/inspirations/dialog-ios-15/) (Mobile) - [Location access prompt](https://kombai.com/gallery/inspirations/dialog-ios-18/) (Mobile) ### 6. Onboarding and announcements Tour steps and new-feature introductions, usually a picture, two lines of copy and one button to try it. - [Scionwork](https://kombai.com/gallery/inspirations/dialog-web-10/) (Web) - [Bonefold](https://kombai.com/gallery/inspirations/dialog-web-42/) (Web) - [Salterna](https://kombai.com/gallery/inspirations/dialog-ios-104/) (Mobile) ## Where dialogs show up ### Reporting and safety Report flows list the reasons as rows, so people flag a post or a profile without leaving it. - [Verdanel](https://kombai.com/gallery/inspirations/dialog-web-102/) (Web) - [Sedgemarrow](https://kombai.com/gallery/inspirations/dialog-web-39/) (Web) - [Mortaris](https://kombai.com/gallery/inspirations/dialog-ios-93/) (Mobile) ### Sharing and invites Invite fields, link settings and invitations to join a workspace. - [Warpline](https://kombai.com/gallery/inspirations/dialog-web-8/) (Web) - [Ardenwick](https://kombai.com/gallery/inspirations/dialog-web-107/) (Web) - [Cadgerow](https://kombai.com/gallery/inspirations/dialog-ios-108/) (Mobile) ### Settings and security Preferences, profile edits and two-factor setup opened over the app, so people land back where they were. - [Yondermere](https://kombai.com/gallery/inspirations/dialog-web-91/) (Web) - [Weirholt](https://kombai.com/gallery/inspirations/dialog-web-33/) (Web) - [Update your profile](https://kombai.com/gallery/inspirations/dialog-ios-5/) (Mobile) ### Success and rewards A sent, saved or earned moment that people close with one button. - [Dovetide](https://kombai.com/gallery/inspirations/dialog-web-56/) (Web) - [Kavora](https://kombai.com/gallery/inspirations/dialog-ios-53/) (Mobile) - [Pulpwren](https://kombai.com/gallery/inspirations/dialog-ios-114/) (Mobile) ## Dialog vs similar components | | [Dialog](https://kombai.com/glossary/dialog/) | [Bottom sheet](https://kombai.com/glossary/bottom-sheet/) | [Popover](https://kombai.com/glossary/popover/) | [Toast notification](https://kombai.com/glossary/toast-notification/) | |---|---|---|---|---| | Blocks the page | Yes, until answered | Often, behind a scrim | No | No | | Sits | Centered over the screen | Along the bottom edge | Next to its trigger | At an edge or corner | | Best for | Decisions and short tasks | Actions and detail on mobile | Small options in context | Saying something happened | ## Build notes - Use the native element with showModal(). The browser makes the page behind it inert and closes it on Escape. - For a custom dialog, set role="dialog" and aria-modal="true", and point aria-labelledby at the visible title. - Use role="alertdialog" for confirmations that need an answer, with aria-describedby on the message. - Move focus inside on open and keep Tab and Shift+Tab within the dialog. On close, return focus to the button that opened it. - For a destructive confirm, put first focus on the least destructive action, like Cancel. - Name buttons for the result, like Delete or Save changes, rather than OK. ## FAQ ### What's the difference between a dialog and a modal? A modal is any layer that blocks the page until it closes. Most dialogs are modal, but a dialog can also be non-modal, like a find and replace window that lets people keep working on the page behind it. ### Should clicking outside a dialog close it? For a dialog that only shows information, yes. For a form or a destructive confirm, no: a stray click shouldn't throw away typed text or count as an answer. Either way, Escape and a visible Cancel or close button should always work. ### Should every delete ask for confirmation? No. Confirm deletes that are rare and can't be undone, like closing an account. For everyday deletes people can undo, like an email or a file, delete right away and offer Undo. ### How many buttons should a dialog have? One or two, and three at most. Put Cancel on the leading side and the main action on the trailing side, and label each button with what it does. ## Related terms - [Drawer](https://kombai.com/glossary/drawer/) - [Full screen overlay](https://kombai.com/glossary/full-screen-overlay/) - [Action sheet](https://kombai.com/glossary/action-sheet/) - [Toast notification](https://kombai.com/glossary/toast-notification/) ## References - [WAI-ARIA Authoring Practices: Dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) - [WAI-ARIA Authoring Practices: Alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) - [MDN: The dialog element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog) - [Apple Human Interface Guidelines: Alerts](https://developer.apple.com/design/human-interface-guidelines/alerts)