Library / UI components / Modal
No. 001·noun·also called dialog, popup, lightbox

Modal

A box that appears in the middle of the screen, dims everything behind it, and needs an answer before you can carry on.

SPECIMEN · LIVE DEMO
Definition

What it is

A modal is a focused window that sits on top of the page. The rest of the screen is dimmed and blocked, so the only thing you can do is deal with the modal: fill it in, confirm, or close it.

Use one when you need a decision or a short task without losing the page underneath: "Delete this project?", a quick edit form, a sign-in prompt. Keep them short. If it needs scrolling, it probably wants to be its own page.

A modal is not a toast (which informs without blocking) and not a drawer (which slides in from an edge and usually leaves the page visible).

Say it like a builder

How to ask for it

Vague

“When someone clicks delete, can you make something pop up to check they really mean it?”

Precise

“When a user clicks Delete on a project, open a confirmation modal with the project name, a red "Delete project" button, and a Cancel button. Pressing Escape or clicking the backdrop should close the modal without deleting.”

Why it works

"Something pop up" could be a toast, a tooltip, or a new page; "modal" names a blocking dialog and the prompt spells out how it closes.

In the wild

You've seen this in

  • GThe "Discard draft?" confirmation in Gmail
  • NNotion's share settings window
  • GThe "Create repository" dialog in GitHub Desktop
Usage note

Often confused with

DrawerA drawer slides in from the edge and keeps the page visible; a modal sits in the center and blocks it.ToastA toast tells you something and leaves on its own; a modal waits for you to respond.PopoverA popover is small and anchored to the button that opened it; a modal is centered and takes over.