Component confusables
The component pairs people reach for interchangeably but shouldn't — tooltip vs popover, badge vs tag, sheet vs drawer vs dialog. Pick by behaviour, not by looks.
Raw markdown On GitHubreferences/components/component-confusables.md
Taught in
Some components look alike and get used interchangeably. The cost is silent: the wrong one breaks an expectation the user already has. Pick by behaviour, not by appearance. This is articulate-precisely applied to the component layer — naming the difference is choosing the right one.
Tooltip vs popover
The line is interactivity:
- Tooltip — a hover/focus label that explains an element. It cannot hold interactive content. No links, no buttons — the pointer can't move into it without dismissing it.
- Popover — a click-anchored overlay that can hold interactive content: links, buttons, a small form. It stays open until dismissed.
If you need a link inside the floating thing, it is a popover, not a tooltip. A button living in a tooltip is the tell that the wrong primitive was chosen. Both still need accessibility-baseline focus handling.
Badge vs tag
The line is ownership and interactivity:
- Badge — attached to another element and read-only. Numeric badges imply a count (the "3" on an inbox); word badges ("New", a status) are informational.
- Tag — standalone and interactive: selectable, removable, used to categorise or filter. A chip the user can pick up or discard.
A badge is pinned on; a tag is handled. Styling one as the other collapses a real behavioural difference and trains the user to expect the wrong affordance.
Sheet vs drawer vs dialog
All three are overlays; the difference is origin and intent — and all three share the same focus-and-dismissal rules as a modal (see tray-rules):
- Dialog / modal — interrupts the flow centre-screen to demand a decision. Focus trapped, background inert.
- Sheet — slides in from a screen edge; common on mobile for secondary nav or contextual actions.
- Drawer — a bottom sheet pulled up from the base; a frequent mobile replacement for a dialog.
Reach for a dialog when the choice must be made now; reach for a sheet or drawer when the surface is secondary and dismissible.
Gotcha
The trap is choosing by how it looks in the design file ("a little floating box") instead of how it behaves. Ask three questions: does the user need to interact inside it (popover, not tooltip)? Can they act on it (tag, not badge)? Must they decide now (dialog, not sheet)? Behaviour picks the component.
Sources
- Index — Say Precisely What You Mean, Emil Kowalski & Glenn Carstens-Peters — index.how/to/articulate. The components vocabulary these distinctions sharpen; see also design-vocabulary.
- tray-rules — Benji Taylor's overlay/sheet rules. accessibility-baseline — the focus and dismissal floor.
componentsvocabularydistinctions