Components

A small, read-only label that appears on hover or focus — fifteen words at most. It explains or names a control; it never holds actions or a workflow.

Use when

A user needs lightweight clarification on hover, focus, or long-press — and the content is purely informational.

Confused with

Popover — both float near a trigger, but a tooltip is read-only while a popover is interactive.

Say it precisely“Add a popup on hover.”“Show a tooltip on hover and focus, max ~12 words, 8px above the trigger; dismiss on blur or Escape.”

An interactive, non-modal panel anchored to a trigger, dismissed by outside click or Escape. It can hold actions, previews, or a small form without blocking the page.

Use when

A user needs a small decision surface — actions, a preview, a short form — without leaving context.

Don't use when

The choice must block everything else first. That's a modal.

Say it precisely“Make a small modal under the button.”“Open an anchored popover below the trigger with actions; dismiss on outside click or Escape, return focus to the trigger.”

A blocking dialog over a scrim that traps focus until it's dismissed or completed. It interrupts the surface on purpose, so reserve it for decisions that must happen now.

Use when

A user must make or confirm one focused decision before anything else continues.

Confused with

Drawer — both overlay the page, but a modal centers and a drawer is anchored to an edge.

Say it precisely“Open a centered popup.”“Open a modal dialog over a scrim; trap focus, close on Escape or scrim click, and restore focus to the opener.”

A panel that slides in from an edge — left, right, top, or bottom — usually keeping a sense of the page behind it. Best for secondary content that needs room.

Use when

Filters, details, or navigation are secondary but need more space than a popover allows.

Don't use when

The content is a tiny hint — use a tooltip or popover instead.

Say it precisely“Show a side popup.”“Open a right-edge drawer over a dimmed scrim; close on Escape or scrim click.”

A semi-transparent layer that dims and blocks everything beneath a modal or drawer. It isn't the dialog — it's the wash that pulls focus forward and receives the dismiss click.

Use when

An overlay should command attention and the rest of the page must become inert.

Confused with

Backdrop blur — a scrim darkens to block interaction; a blur is purely aesthetic and doesn't imply blocking.

Say it precisely“Add a dark background behind it.”“Render a 40%-opacity scrim behind the dialog that blocks pointer events and closes on click.”

A brief, non-blocking notification that appears, lingers, and auto-dismisses — confirming an action without stealing focus. It may stack, but it never demands a response.

Use when

You confirm a result or surface a low-stakes alert the user doesn't need to act on.

Confused with

Alert banner — a banner is persistent and inline; a toast is transient and floats above the layout.

Say it precisely“Show a message at the top.”“Show a bottom-right toast for 4s with an Undo action; auto-dismiss, pause on hover, stack newest on top.”