Why the right name prevents rework
Why naming a UI element correctly matters.
A component name is not vocabulary. It is a compressed behavior contract that decides focus, keyboard access, dismissal, and accessibility before anyone writes code.
01 · The hidden cost
A wrong name builds the wrong interface
Teams lose time when no one can name the control they are discussing. A developer may build a Tooltip, but if users must click links inside the surface, keyboard and pointer users can be blocked before they reach the content. A product manager may ask for a Select, but if users must type an arbitrary value, the chosen control can make the required task impossible. The name decides the build, so a vague name decides nothing and a wrong name decides harmfully.
02 · What a name encodes
The label carries behavior rules
A reviewed component name implies a contract: what triggers it, whether the page behind stays usable, where keyboard focus moves, which keys operate it, how it closes, where it sits, and how it adapts on touch screens. These are not styling details. They are the difference between an interface that works for everyone and one that silently excludes part of the audience. Naming correctly is how a team hands those requirements to a coding agent without repeating them by hand.
03 · Shared language
One term aligns the whole team
Designers, developers, reviewers, and accessibility auditors all read the same word and expect the same contract. When the name is precise, a review comment such as “this should be a Popover, not a Tooltip” carries a complete, testable meaning. When the name is vague, every reviewer supplies their own assumption and the implementation drifts.
04 · AI coding agents
Agents need the name you intend
A coding agent generates from the words you give it. “Build a modern dropdown” leaves purpose, value behavior, focus, keyboard access, dismissal, and mobile adaptation unspecified. Naming the pattern after stating the behavior contract lets the agent build the right thing and lets you reject near misses such as a Combobox mistaken for a Select. The name is the shortest correct instruction you can send.
Put the name to work
Describe the interface, get the right term.
Start a diagnosis Read the identification guideFrequently asked questions
Why UI naming matters: common questions
Direct answers based on the reviewed behavior contract above.
Does the component name really change the build?
Yes. The name implies trigger, modality, focus movement, keyboard behavior, dismissal, placement, and mobile adaptation. Choosing Tooltip versus Popover versus Hover Card changes whether links inside the surface are operable, which is an accessibility and task-completion difference, not a visual one.
What if two UI names both seem correct?
Check whether the terms describe different layers. One may be a semantic pattern while another describes presentation or behavior. Record both only when each adds a real requirement; otherwise use the decisive difference to reject the near match.
How does naming help a coding agent?
A precise name plus a short behavior contract is the most compact correct instruction. It lets the agent choose the right component and lets you exclude incompatible alternatives such as a Combobox used where only a Select is required.
Where should I learn the right name?
Describe the observable behavior in the diagnostic, compare the nearby candidates, and open the pattern reference that matches. Each reference states what its name can and cannot guarantee.