Dialog
A dialog is a user interface element that presents focused information, input, or choices in a separate interaction layer.
Dialogs are commonly used to ask for confirmation, collect a small amount of input, or show a message that needs the user’s attention.
What it does
A dialog interrupts or redirects the user into a focused interaction.
It is commonly used to:
- Confirm an action
- Ask for input
- Show an alert or warning
- Present settings or short forms
- Focus attention on one task before continuing
Core concepts
Focused interaction surface
A dialog narrows the user’s attention to one small task or message.
That is why dialogs are used for confirmations, prompts, and short-form interactions.
Dialog vs modal
A dialog and a modal are related, but not always identical concepts.
Many dialogs are modal, but dialog is the broader UI pattern.
Web and application usage
Dialogs appear in desktop apps, web apps, and native mobile interfaces.
In web contexts, dialogs can also refer to patterns implemented through custom UI or the HTML <dialog> element.
Common use cases
- Delete confirmations
- Save prompts
- Small form inputs
- Error or warning alerts
- Settings or option pickers
Practical notes
- Not every overlay is a good dialog.
- Dialogs work best when the task is focused and short.
- Overusing dialogs can make a UI feel disruptive or heavy.
- Dialogs belong close to UI component and interaction-pattern discussions.
Sources Used
Frequently Asked Questions
Is a dialog the same as a modal?
Not always. A modal is usually a stronger blocking interaction, while dialog is the broader concept.
Can dialogs collect user input?
Yes. That is one of their most common uses.
Are dialogs only for the web?
No. They are a general UI pattern used across many kinds of software.