Popup vs modal vs overlay

The terms popup, modal, and overlay are often used interchangeably but refer to different UI elements with distinct behaviors and purposes.

Here's a quick overview of the differences between these terms.

Overlay

An overlay is any element that is rendered over the main content of the UI and is usually a temporary addition to the view.

Modals, popups, and tooltips are all different kinds of overlays.

Modal

A modal is an overlay that blocks interaction with the main content of the UI until the modal is closed.

Important actions or information that should not be ignored can be shown in a modal.

Popup

A popup is an overlay that does not block interactions with the main content. It usually disappears after a short time or when dismissed by the user.

Toasts and snackbars are examples of good popups. Popups are also often used for intrusive ads.

Tooltip

A tooltip is a small overlay that appears when the user hovers over an element and usually disappears when the cursor moves away.

Tooltips typically contain short unstyled text.

Popover

A popover is similar to a tooltip, but it is generally larger and can contain more complex content, such as images, buttons, or forms.

Popovers are often triggered by clicking an element and generally have to be closed.

Drawer

A drawer is an overlay that enters the page from the left or right side of the screen.

Drawers are often used for navigation menus or for additional options like filtering and sorting.

Top/bottom sheet

Top sheets and bottom sheets are overlays that enter the page from the top or bottom of the screen.

Top and bottom sheets are often used on mobile devices.