Popup
'Popup' is a generic term that refers to any temporary overlay that appears on top of the main content or interface.
Last updated
'Popup' is a generic term that refers to any temporary overlay that appears on top of the main content or interface.
Last updated
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.
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.
Non-modal elements allow users to interact with the interface without requiring immediate attention or interrupting the overall workflow. They do not impose context.
💡 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.
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.
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.
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).
Popups can serve various purposes, including notifications, alerts, or even modal dialogs.
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.
