Deep dive · 01
Why “just add a popup” is
the most dangerous request
Four people hear the same sentence and each picture something different. And that difference changes the build, the effort and the experience. Let us work through it by clicking.
One request, four outcomes
A client said "just add a popup here". Which of the four below did they mean? Try each one.
A completely new window opened
This is a real "popup". The browser opens a new window. Modern browsers, though, block this by default— it only appears if the user allows it.
Promotion notice
Sign up now and your first month is free.
This is what most clients actually want. The accurate name is "modal dialog".
It does not block the flow — a notice that stays put. It remains until the user closes it.
Appears briefly and disappears on its own. Only for content that is safe to miss.
"Popup" is a word that flattens four different levels into one. When it comes up in a meeting, do not write it down as-is — ask: "a new window, something over the screen, or something that stays put?"
A modal is not a thing, it is a “property”
The essence of a modal is not a pretty box — it is blocking what is behind. Open both side by side and try the button behind each.
Modal blocks behind
Modal
While this is open, the button behind cannot be pressed.
Non-modal behind stays usable
On the left, while the modal is open the button behind is dead; on the right, even with the panel open it still works.
Modal or non-modal is a product decision, not a matter of taste. If the flow genuinely must be interrupted, modal; if it is only for reference, non-modal. Use modals sparingly.
A dialog is the “box” itself
A component made of a title, body and buttons is a dialog. That box can be shown modally or non-modally.
Delete this for good?
BodyA deleted post cannot be recovered.
ButtonsMemorise it in one sentence: "a dialog (the thing) shown in a modal way (the manner), and the kind that only informs is an alert (the type)." The indentation is the containment.
One button or two
Both are kinds of dialog. An alert only informs; a confirm asks once more just before something irreversible.
Alert 1 button
Could not save
Please check your connection.
Confirm 2 buttons
Delete this post?
A deleted post cannot be recovered.
The buttons say OK / Cancel — there is no telling what you are agreeing to. You even end up "cancelling the cancel".
The buttons state the action — Delete / Keep. You can decide from the buttons alone, without reading the sentence.
Destructive actions get red plus a clear verb. And "do it, then offer undo" is often far smoother than a confirm.
Toast · Snackbar · Banner
Notices that do not block the flow. What separates them is how long they stay.
| Name | Button | Dismissal | Used for |
|---|---|---|---|
| Toast | none | automatic | saved, copied — safe to miss |
| Snackbar | yes | automatic | deleted + undo |
| Banner | sometimes | stays | maintenance, expiring payment — needs action |
Never handle error messages with a toast. If someone misses it, there is no way to see it again. Form errors belong directly below the field that has the problem.
Now ask for it like this
Sentences that carry the same requirement without ambiguity. Copy them as they are.
I want to show a notice after sign-up. It has to interrupt the flow, so please show it as a modal dialog. Dim the background, and make it close on dim click too. Close on Esc as well.
When the delete button is pressed, show a confirm dialog. Label the buttons “Delete / Keep”, and style Delete as destructive (red). In this case, make it so it does not close on dim click either.
Once saving finishes, show a toast reading “Saved” for two seconds. It must not block the flow, so do not use a modal.
When input is invalid, do not use a toast — show an inline error below the field in question. It has to be clear which field is the problem.
On mobile, instead of a centred modal, raise a bottom sheet from the bottom. The lower area is easier to reach.
When a request contains ① which component ② modal or not ③ how it closes, you usually get what you wanted the first time.
WHY THIS MATTERS
Name one word precisely
and the rework disappears.
Simply saying “modal dialog” instead of “popup” gets the developer, the designer and the client looking at the same picture. Terminology is not knowledge — it is a tool for cutting communication cost.