Skip to content
UI Kit
Accent color

Modals, toasts, tooltips and menus

Dialogs, sheets, popovers, tooltips and toasts.

9 components · 21 variants
Switch category

Nine overlays and when to use each

Overlays put something on top of the page, and each kind asks for a different amount of attention. The nine components here manage focus, Escape and outside clicks themselves and return focus to the trigger when they close, which is the part most hand-written modals get wrong.

Dialog stops everything for a decision or a short form. Sheet slides in from an edge for filters or details. Popover and Hover card show more next to a trigger without blocking the page. Tooltip labels icons. Dropdown menu holds actions with shortcuts and a context menu. Command palette searches and runs anything with Ctrl K. Alert stays in the page, Toast reports the result of an action and goes away by itself.

Choose the lightest overlay that does the job, a toast rather than a dialog for a success message. Never put important content only in a tooltip, touch screens cannot hover. Keep dialogs short, a form with more than five fields belongs on its own page.

On this page

Every component of this category. Pick one to jump to its variants.

hover-card

Hover card

More about a person, a link, a product or a term while you rest on it. Opens on hover and on focus, Tab reaches its buttons, the first tap opens it on touch.

Props and details · Hover card

Profile

A mention that shows who someone is, with avatar, role, a short bio, two numbers and a follow button.

Open in Studio

Product

A product named in a story, with picture, rating, price and a button to put it in the bag without leaving the page.

Open in Studio

Definition

A term with a dotted line that explains itself, for glossaries, legal pages and courses. Without a button the card is only text.

Open in Studio

dropdown-menu

Dropdown menu

Menus with icons, shortcuts, checkboxes and radios. Arrow keys, Home, End, typeahead, Escape. Plus a context menu.

Props and details · Dropdown menu

alert

Alert

Messages in the page for info, success, warning and error, each with an icon and clear words. Tones come from the kit tokens.

Props and details · Alert

Tones

Soft surfaces with title, text and actions. They rise in one after another, a dismissed alert slides out and the space closes softly.

Styles

Outline for cards, a bar on the edge for long pages, one compact line for forms and toolbars.

command-palette

Command palette

Search and run anything. Ctrl K or ⌘K opens it, arrows move, Enter runs, and groups keep it calm.

Props and details · Command palette

Command list

The palette content in place. Try typing, the list filters across labels, hints and keywords.

Palette

In a modal near the top of the screen. Press Ctrl K or ⌘K, or use the button.

dialog

Dialog

A modal on the native dialog element. Focus stays inside, Escape and the backdrop close it, and focus returns to the trigger.

Props and details · Dialog

With a form

Title, text, fields and actions. On phones the dialog sits at the bottom, near the thumb.

Confirmation

An alert dialog for destructive steps. It names the thing and the consequence and waits for an answer.

popover

Popover

A panel next to a trigger for short forms and details. Flips when there is no room, Escape and a click outside close it.

Props and details · Popover

Share

A small form in a panel. Focus moves in when it opens and back to the button when it closes.

Details

Information on demand, here the opening hours of a café next to its address.

sheet

Sheet

A modal panel that slides in from any edge, with a fixed header, a scrolling body and a sticky footer.

Props and details · Sheet

Filters from the right

The classic for filters, carts and details. The footer stays while the body scrolls.

Left and bottom

Navigation from the left, short notices from the bottom with a grab handle.

toast

Toast

Short notes after an action, stacked and fanned out on hover. Timers pause while you read, errors stay longer.

Props and details · Toast

Variants

Success, error, warning, info, loading and one action. Always an icon and words, never color alone.

Live stack

Fire a few toasts. They stack bottom right, fan out on hover and close on their own.

tooltip

Tooltip

Short labels on hover and focus, with an optional shortcut. Escape hides them, they never hold important content.

Props and details · Tooltip

Sides and shortcuts

Four sides, the arrow always points at the trigger, even when the tip has to move to stay on screen.

In a toolbar

Icon buttons get their names on hover. The quiet tone fits help next to form fields.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Overlays on a page.

Often searched

Jump to

Copied to the clipboard