Free UI pattern finder · Web interfaces only
Describe the UI element you see, how it looks or behaves, or what your coding agent got wrong. Compare likely web UI patterns and leave with a testable implementation brief.
Diagnostic console
Try a field report
From visual clue to behavior contract
A component name is useful only when it leads to the correct interaction, focus, keyboard, dismissal, and mobile behavior.
Start with what opens the interface, where it appears, whether the page behind it remains usable, what content it contains, and how it closes. You do not need to know the component name. A concrete behavior such as “a card opens on focus and contains a link” is more useful than a visual label such as “small popup.”
The diagnostic keeps two or three plausible candidates instead of pretending the first keyword match is correct. It then asks only questions that can change the result. This matters because Tooltip, Popover, and Hover Card may share a floating shape while requiring different interactivity and persistence rules.
The final output turns the selected pattern into an implementation contract. It records trigger, dismissal, modality, focus, keyboard behavior, placement, mobile behavior, excluded alternatives, and observable acceptance checks. Give that brief to a coding agent, then test the result instead of trusting the label alone.
Need a manual process first? Read the step-by-step guide to identifying an unnamed UI pattern.
Use the right level of language
These terms describe different levels of the same interface. Start with the UI element you can observe, move to the component a developer can build, then confirm the pattern whose behavior matches the task.
The broadest user-facing term for something visible or interactive, such as a field, button, panel, icon, or floating surface. Use it when you can describe the thing but cannot name it yet.
A reusable implementation unit in a design system or codebase. A component may expose several states and behaviors, and its library name does not always identify the underlying interaction correctly.
A repeatable solution to an interface problem. The pattern connects the visible form to expected behavior, including trigger, focus, keyboard support, dismissal, placement, and mobile adaptation.
Six ambiguity clusters
Each cluster is built around decisions that change focus, keyboard, modality, or value behavior.
Reviewed reference set
These entries are deliberately not flattened into one false taxonomy. Each page states what its name can and cannot guarantee.
Hover and contextual information · semantic pattern
A small, non-interactive text popup that supplements a control when it receives hover or keyboard focus.
Hover and contextual information · semantic pattern
A non-modal contextual surface that can contain interactive content and stays associated with a trigger.
Hover and contextual information · presentation form
A richer preview of a referenced person, place, or object, revealed from its link or trigger on hover and focus.
Dialog and side surfaces · semantic pattern
A separate window layered over a page that contains a focused task or information and may be modal or non-modal.
Dialog and side surfaces · semantic pattern
A dialog that makes the rest of the page inert until the user completes or dismisses the dialog.
Dialog and side surfaces · presentation form
A panel that enters from a screen edge, often with touch-friendly drag or snap behavior; modality must be specified separately.
Dialog and side surfaces · presentation form
A panel presented over the page from a defined side, commonly composed with dialog behavior and explicit close controls.
Selection and suggestions · semantic pattern
A control for choosing one or more values from a predefined set without accepting arbitrary text input.
Selection and suggestions · semantic pattern
An input or selection control with an associated popup that presents allowed or suggested values.
Selection and suggestions · behavior variant
A suggestion behavior that filters or completes values as a user types, commonly implemented as an editable combobox.
Menus and navigation · composite pattern
A button-triggered menu of commands or choices with managed keyboard navigation.
Menus and navigation · composite pattern
A command menu opened for a specific object or pointer location, commonly by right-click or long press.
Menus and navigation · composite pattern
A structured set of links that helps users move through the primary destinations of a site or application.
Feedback and notices · message channel
A brief, non-blocking message about a recent event that may disappear after users have enough time to perceive it.
Feedback and notices · semantic pattern
A brief, important dynamic message announced to users without moving keyboard focus or blocking their task.
Feedback and notices · message channel
A message about an event or state that may persist, include actions, and remain available beyond the immediate moment.
Feedback and notices · presentation form
A prominent page-level message region that persists while a condition, announcement, or required awareness remains relevant.
Progressive disclosure · composite pattern
A vertically stacked set of interactive headings that reveal or hide their associated content panels.
Progressive disclosure · semantic pattern
A button that controls whether one related region of content is visible or hidden.
Progressive disclosure · generic behavior
A generic behavior in which a region can collapse or expand; it does not by itself define the surrounding semantic structure.
Frequently asked questions
These answers explain the scope of the tool before you rely on a diagnosis.
A UI pattern is a repeatable solution to an interface problem with recognizable behavior and expectations. The visible shape is only one clue. Trigger, focus movement, keyboard support, dismissal, modality, placement, persistence, and content all help define the actual contract. Some familiar terms describe semantics, while others describe presentation or a behavior attached to another component.
Describe observable behavior instead of guessing a label. Note what activates it, whether it contains controls, whether users can interact with the background, what happens to keyboard focus, how it closes, whether it persists, and what changes on mobile. Use those facts to eliminate incompatible patterns before choosing the closest reviewed term.
The name is shorthand for implementation decisions. Asking for a Tooltip when users must click links inside the surface can produce an inaccessible build. Asking for a Select when users must type and filter options can block the required task. The useful outcome is not vocabulary alone; it is a behavior contract that prevents a coding agent or component library from making the wrong assumptions.
No. It returns reviewed candidates, decisive differences, a framework-neutral implementation brief, and observable checks. You still choose the component library and verify the result in your own application. The tool covers a closed set of 20 web UI concepts and can return no match when the evidence does not support a reviewed answer.