What Is This UI Element Called? Identify the Right PatternSkip to content
Free UI pattern finder · Web interfaces only
What’s this UI element called, and how should it behave?
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.
Surprise me: random pattern →
Behavior atlas03 / 39 traces
Modal Dialog behavior diagram
Modal blocking layer
Sheet behavior diagram
Sheet edge anchored
Combobox behavior diagram
Combobox editable choice
39 reviewed concepts 8 ambiguity clusters. No invented confidence score.
Diagnostic console
Describe the evidence
reviewed rules only
UI element, behavior, or implementation problem
English web UI descriptions only. Do not paste secrets or private source code.<br>0 / 500
Diagnose pattern →<br>Clear
Try a field report
01A small card appears on hover, but users need to click links inside it.<br>02A panel slides in from the right and blocks the page until it is closed.<br>03The AI built a select, but users need to type and filter options.<br>04A success message stays on screen and interrupts the workflow.
Free to use Use the diagnostic, comparisons, and reference pages without payment.
No account required Identify a UI element without creating a profile.
Runs in your browser The current diagnostic rules evaluate your description on this page.
Protect private information Do not paste secrets, credentials, or private source code.
From visual clue to behavior contract
How to identify a UI element you can’t name
A component name is useful only when it leads to the correct interaction, focus, keyboard, dismissal, and mobile behavior.
01<br>Describe observable evidence
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.”
02<br>Compare nearby alternatives
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.
03<br>Copy a testable brief
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
UI element, UI component, or UI pattern?
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.
01<br>UI element
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.
02<br>UI component
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.
03<br>UI pattern
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.
8 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 information comparison diagram
Hover and contextual information Choose between supplementary text, a preview, and an interactive contextual surface.
02
Dialog and side surfaces comparison diagram
Dialog and side surfaces Separate semantic dialog behavior from edge-based presentation.
03
Selection and suggestions comparison diagram
Selection and suggestions Choose between fixed selection, editable selection, and suggestion behavior.
04
Menus and navigation comparison diagram
Menus and navigation Distinguish commands, object-context actions, and persistent navigation.
05
Feedback and notices comparison diagram
Feedback and notices Choose a message channel based on urgency, persistence, scope, and required action.
06
Progressive disclosure comparison diagram
Progressive disclosure Separate a multi-section structure from one show-or-hide relationship and a generic collapse behavior.
07
Choice and binary state controls comparison diagram
Choice and binary state controls Choose among independent checked...