01
Hover and contextual information · semantic pattern
Tooltip
A small, non-interactive text popup that supplements a control when it receives hover or keyboard focus.
Field guide 01 · Web UI only
Eyeballing the interface is not a specification.
Describe what you see, how it should behave, or what your coding agent got wrong. Compare the likely UI patterns and leave with an implementation brief you can test.
Diagnostic console
Describe the evidence
Try a field report
Six ambiguity clusters
The expensive mistakes live between labels
Each cluster is built around decisions that change focus, keyboard, modality, or value behavior.
01
Hover and contextual informationChoose between supplementary text, a preview, and an interactive contextual surface.
02
Dialog and side surfacesSeparate semantic dialog behavior from edge-based presentation.
03
Selection and suggestionsChoose between fixed selection, editable selection, and suggestion behavior.
04
Menus and navigationDistinguish commands, object-context actions, and persistent navigation.
05
Feedback and noticesChoose a message channel based on urgency, persistence, scope, and required action.
06
Progressive disclosureSeparate a multi-section structure from one show-or-hide relationship and a generic collapse behavior.
Reviewed reference set
20 patterns, behaviors, and presentation forms
These entries are deliberately not flattened into one false taxonomy. Each page states what its name can and cannot guarantee.
02
Hover and contextual information · semantic pattern
Popover
A non-modal contextual surface that can contain interactive content and stays associated with a trigger.
03
Hover and contextual information · presentation form
Hover Card
A richer preview of a referenced person, place, or object, revealed from its link or trigger on hover and focus.
04
Dialog and side surfaces · semantic pattern
Dialog
A separate window layered over a page that contains a focused task or information and may be modal or non-modal.
05
Dialog and side surfaces · semantic pattern
Modal Dialog
A dialog that makes the rest of the page inert until the user completes or dismisses the dialog.
06
Dialog and side surfaces · presentation form
Drawer
A panel that enters from a screen edge, often with touch-friendly drag or snap behavior; modality must be specified separately.
07
Dialog and side surfaces · presentation form
Sheet
A panel presented over the page from a defined side, commonly composed with dialog behavior and explicit close controls.
08
Selection and suggestions · semantic pattern
Select
A control for choosing one or more values from a predefined set without accepting arbitrary text input.
09
Selection and suggestions · semantic pattern
Combobox
An input or selection control with an associated popup that presents allowed or suggested values.
10
Selection and suggestions · behavior variant
Autocomplete
A suggestion behavior that filters or completes values as a user types, commonly implemented as an editable combobox.
11
Menus and navigation · composite pattern
Dropdown Menu
A button-triggered menu of commands or choices with managed keyboard navigation.
12
Menus and navigation · composite pattern
Context Menu
A command menu opened for a specific object or pointer location, commonly by right-click or long press.
13
Menus and navigation · composite pattern
Navigation Menu
A structured set of links that helps users move through the primary destinations of a site or application.
14
Feedback and notices · message channel
Toast
A brief, non-blocking message about a recent event that may disappear after users have enough time to perceive it.
15
Feedback and notices · semantic pattern
Alert
A brief, important dynamic message announced to users without moving keyboard focus or blocking their task.
16
Feedback and notices · message channel
Notification
A message about an event or state that may persist, include actions, and remain available beyond the immediate moment.
17
Feedback and notices · presentation form
Banner
A prominent page-level message region that persists while a condition, announcement, or required awareness remains relevant.
18
Progressive disclosure · composite pattern
Accordion
A vertically stacked set of interactive headings that reveal or hide their associated content panels.
19
Progressive disclosure · semantic pattern
Disclosure
A button that controls whether one related region of content is visible or hidden.
20
Progressive disclosure · generic behavior
Collapsible
A generic behavior in which a region can collapse or expand; it does not by itself define the surrounding semantic structure.