Popup

'Popup' is a generic term that refers to any temporary overlay that appears on top of the main content or interface.

Popups usually require interactions from the user or provide additional information. Popups can vary in size — from very small to full-screen.

Popups are above all other elements on the Z-axis.

---

Characteristics

Constrained focus — modal vs. non-modal

The key difference between modal and non-modal elements lies in the level of interruption and interaction restriction.

• Modal elements demand user attention by blocking interaction with the rest of the interface until the task is addressed. They interrupt the workflow and have the highest level of importance. Users cannot access the underlying layer either via regular not keyboard navigation. Modals have their own context.

Modal share dialog - Google Docs

• Non-modal elements allow users to interact with the interface without requiring immediate attention or interrupting the overall workflow. They do not impose context.

Examples of non-modal elements

💡 In some design systems, you can encounter a component named ‘modal’. Usually, it is a modal dialog, it’s a naming inconsistency since…

Modality is a characteristic, not the name of a component itself.

Backdrop

In some cases, popup elements have a backdrop. Usually, it’s an overlay with lowered opacity that serves as a visual cue that…

Signalizes that the content behind it is not available for interactions ❌.

It helps users focus on the popup and avoid confusion when trying to interact with the main page content.

Backdrop for a modal dialog

Light vs. explicit dismiss

The third dimension to consider is how users dismiss a component.

• Explicit dismiss is when a component allows a user to dismiss it, for example, using a close button (x icon), cancel button, or the escape key.

Explicit dismiss using the 'cancel' button

• Light dismiss means that a component disappears automatically under certain conditions (scroll the page, click outside of the component, or hover out of the button that was triggering it).

Light dismiss - hover out of the triger element

---

Examples

Popups can serve various purposes, including notifications, alerts, or even modal dialogs.

Modal dialog (example of a popup)

Tooltip (example of a popup)

---

Categorization

Popups are included in a group called overlays.

💡 The main difference is that popups serve the purpose of enabling interaction or providing information, whereas overlays also include purely graphical elements.