Commonly confused.
Two things that look alike, one decisive difference. Pick the pair you’re unsure about; each page answers straight away, then shows the tells you can check against the pixels in front of you.
Popover vs. Tooltip
A tooltip appears on hover, holds only a short text label, and vanishes the moment the pointer leaves — you can never click inside it. A popover opens on click, can hold real controls (forms, buttons, lists), and stays open until you dismiss it. If you can interact with its content, it's a popover.
Modal vs. Popover
A modal dialog takes over: it centers itself, dims the page behind a scrim, and blocks everything until you deal with it. A popover stays local: it's anchored to the control that opened it, the rest of the page keeps working, and clicking anywhere else quietly dismisses it.
Dropdown vs. Select vs. Combobox
A dropdown menu runs actions (Rename, Delete…) — it never holds a chosen value. A select (pop-up button on the Mac) picks one value from a fixed list and keeps showing it afterwards. A combobox is a select you can type in: the list filters as you type.
Tabs vs. Segmented Control
Tabs navigate: each tab owns its own panel, and switching swaps the whole content region. A segmented control (toggle group) modifies: it changes how the SAME content is shown — a view mode, a filter, a setting. Same row-of-labels look, different job.
Accordion vs. Tabs
Both hide sections until asked. Tabs sit in one horizontal row and show exactly one panel at a time. An accordion stacks sections vertically, handles long content and long labels, and can let several sections stay open at once — which tabs never do.
Toast vs. Alert
A toast slides in, confirms something that already happened ("Saved"), and leaves by itself — you never have to touch it. An alert interrupts: it blocks with a question or warning and won't go away until you choose. If the message needs no decision, it should be a toast.
Tooltip vs. Hover Card
Both appear on hover. A tooltip is one short line of plain text naming the thing under the pointer. A hover card is a rich preview — avatar, stats, even buttons — and you can move the pointer INTO it without it vanishing, which a tooltip never allows.
Context Menu vs. Dropdown
Same menu, different birth. A context menu opens AT THE POINTER from a right-click (or long-press) on the thing itself, and its actions apply to that thing. A dropdown menu opens FROM A VISIBLE BUTTON, anchored beneath it — discoverable without knowing any secret gesture.
Carousel vs. Marquee
A carousel is paged and user-driven: arrows, swiping, and the little dots — it stops where you put it. A marquee scrolls by itself in an endless seamless loop; nobody steers it. It's ambient decoration: logo strips, tickers. If there are dots or arrows, it's a carousel.
Lightbox vs. Modal
A lightbox IS a modal, specialized for media: click a thumbnail and the image opens large over a dimmed page, usually with next/prev arrows and click-outside-to-close. Call it a modal dialog when it holds tasks — forms, confirmations, settings. Call it a lightbox when its whole job is viewing images.
Masonry vs. Bento Grid
Masonry packs cards of UNKNOWN heights into columns, like Pinterest — row lines never align, and content flows down each column. A bento grid is DESIGNED: hand-placed tiles of mixed sizes snapping to one grid with aligned edges, like a lunch box. Feeds get masonry; marketing pages and dashboards get bento.
Sidebar vs. Drawer
A sidebar is furniture: a persistent navigation column that shares the layout with the content and stays visible on wide screens. A drawer is a visitor: hidden by default, it slides over the page when summoned — often by a hamburger button — and leaves after you pick something.
Hamburger vs. Kebab (Lines vs. Dots)
Three horizontal LINES is the hamburger: it opens the site's main navigation. Three DOTS is the overflow menu — vertical dots are the kebab, horizontal ones the meatballs — and it holds extra actions for the specific item it sits on, never navigation.
Easing vs. Spring
Easing bends time: the animation runs a fixed duration along a speed curve you chose (ease-out, a cubic-bezier). A spring obeys physics instead — stiffness, damping, initial velocity — so it has no set duration, can overshoot and settle, and reacts naturally when interrupted mid-motion.
Stepper vs. Slider
Both change a number. A stepper nudges it in precise, small steps — click up, click down — best when the exact value matters and the range is small. A slider sweeps a knob across the whole range in one drag — best when roughly-there is fine, like volume or brightness.
Sheet vs. Alert (macOS)
Both are Mac modals, scoped differently. A sheet slides out of ONE window's title bar and blocks only that window — the rest of the app keeps working; it's for tasks that belong to that document. An alert is the small centered window for a warning or decision, badged with the app's icon.
Empty State vs. Skeleton
A skeleton means content is COMING — gray pulsing shapes hold the layout while real content lands. An empty state means there's NOTHING here, and says what to do about it: a line of guidance plus a call to action. Loading gets a skeleton; zero items gets an empty state.
Toolbar vs. Menu Bar (macOS)
The menu bar is the single strip at the very top of the SCREEN — Apple menu, File, Edit — shared by every Mac app in turn. A toolbar lives at the top of one WINDOW, holding that window's icon buttons and search field, merged with its title bar in modern macOS.