> For the complete documentation index, see [llms.txt](https://outdraw-academy.gitbook.io/ux-patterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://outdraw-academy.gitbook.io/ux-patterns/popup.md). # Popup 'Popup' is a generic term that refers to any temporary overlay that appears on top of the main content or interface. {% embed url="" %} 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.

* **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. ### [**Backdrop**](/ux-patterns/backdrop.md) 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.

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.

*** ## Categorization Popups are included in a group called [overlays](/ux-patterns/overlay.md). 💡 The main difference is that popups serve the purpose of enabling interaction or providing information, whereas **overlays also include purely graphical elements**.