A shared vocabulary is the cheapest part of a design system. When a designer says popover and a developer builds a tooltip, one of them has to rebuild it. These are the names most design systems agree on, grouped by what the component does.
Overlays and messages
- Tooltip: a short text label that appears on hover or focus and points at an element. It explains, and never holds anything clickable.
- Popover: a floating panel anchored to a trigger. It can hold interactive content, such as a short menu or a small form.
- Toast: a brief message at the edge of the screen that disappears on its own. It confirms something without interrupting.
- Banner: a message across the full width of a page or section that stays until it is dismissed or the issue is resolved.
- Modal dialog: a window over the page that blocks everything behind it until you answer. Use it for decisions that cannot wait.
- Drawer: a panel that slides in from an edge of the screen for secondary content, filters or navigation.
Navigation and structure
- Breadcrumb: a trail of links showing where the current page sits in the site.
- Pagination: numbered controls that split a long list into pages.
- Tabs: a row of labels that switch between views of different content in the same area.
- Stepper: a numbered sequence showing the steps of a process, which are done and which one you are on.
- Segmented control: a compact group of two to five connected options where exactly one is selected.
- Accordion: stacked headings that each expand to reveal their content.
Status and display
- Badge: a small marker, often a number or a dot, attached to another element to show a count or a status.
- Chip: a compact pill for a filter, a tag or an input value, often selectable or removable.
- Avatar stack: overlapping profile pictures ending in a count for everyone who does not fit.
- Skeleton: a grey placeholder in the shape of the content that is loading.
- Progress bar: a bar that fills as a task advances.
- Keycap: a small key-shaped label that shows a keyboard shortcut.
Inputs
- Toggle switch: turns one setting on or off and takes effect immediately.
- Checkbox: a square box for choosing any number of options from a list, or for agreeing to one thing.
- Radio group: round buttons where choosing one clears the others, for exactly one option from a short list.
- Slider: a track with a handle you drag to pick a value from a range.
The pairs people mix up
- Tooltip or popover: if it contains a link or a button, it is a popover.
- Toast or banner: a toast disappears by itself, a banner waits for you.
- Tabs or segmented control: tabs change the content of an area, a segmented control changes how the same content is shown.
- Checkbox or toggle: a checkbox waits for a Save, a toggle takes effect at once.
- Modal or drawer: a modal asks for a decision, a drawer holds more to look at.
💡 Pick one name per component and write it into your documentation, with the aliases people use. Search finds dropdown faster than select menu, even if the library calls it the second.
Practice
Name That Component shows ten drawings with four names each, two of them look-alikes. Every answer comes with a one-sentence definition, and the end of the game lists the ones you missed.