01
Hover and contextual information · semantic pattern
Tooltip
A small, non-interactive text popup that supplements a control when it receives hover or keyboard focus.
Reviewed component names · 44 entries
UI component names with behavior you can verify.
Browse reviewed UI component names by the task they solve. Each guide explains the behavior contract, accessibility boundaries, common mistakes, and nearby patterns most likely to be confused.
Start with a descriptionChoose the next route
Choose the route that matches what you know
Use a name guide, a side-by-side comparison, or the identification process without forcing one page to answer all three tasks.
Two or more candidates
Compare nearby UI components
Use side-by-side comparisons when names look interchangeable but focus, keyboard, modality, persistence, or value behavior may differ.
Open UI component comparisonsName unknown
Identify an unnamed component
Use the identification guide when you can describe behavior but do not yet know which component or comparison to open.
Open the identification guideComparison cluster
Hover and contextual information
02
Hover and contextual information · semantic pattern
Popover
A non-modal contextual surface that can contain interactive content and stays associated with a trigger.
03
Hover and contextual information · presentation form
Hover Card
A richer preview of a referenced person, place, or object, revealed from its link or trigger on hover and focus.
Comparison cluster
Dialog and side surfaces
01
Dialog and side surfaces · semantic pattern
Dialog
A separate window layered over a page that contains a focused task or information and may be modal or non-modal.
02
Dialog and side surfaces · semantic pattern
Modal Dialog
A dialog that makes the rest of the page inert until the user completes or dismisses the dialog.
03
Dialog and side surfaces · presentation form
Drawer
A panel that enters from a screen edge, often with touch-friendly drag or snap behavior; modality must be specified separately.
04
Dialog and side surfaces · presentation form
Sheet
A panel presented over the page from a defined side, commonly composed with dialog behavior and explicit close controls.
05
Dialog and side surfaces · presentation form
Lightbox
A modal overlay that enlarges an image, video, or media to full or near-full viewport size, dimming the page behind it with close, navigation, and caption controls.
06
Dialog and side surfaces · composite pattern
Carousel
A rotating strip of slides that users can navigate with arrow buttons, dot indicators, or swipe gestures, with optional autoplay and pause.
Comparison cluster
Selection and suggestions
01
Selection and suggestions · semantic pattern
Select
A control for choosing one or more values from a predefined set without accepting arbitrary text input.
02
Selection and suggestions · semantic pattern
Combobox
An input or selection control with an associated popup that presents allowed or suggested values.
03
Selection and suggestions · behavior variant
Autocomplete
A suggestion behavior that filters or completes values as a user types, commonly implemented as an editable combobox.
04
Selection and suggestions · composite pattern
Date Picker
A text input with an associated calendar popup that lets users pick or range-select a date with keyboard navigation.
05
Selection and suggestions · composite pattern
Multi-select
A selection control that keeps several values from one option set, often using checked options, removable chips, or a persistent selected-items list.
Comparison cluster
Menus and navigation
01
Menus and navigation · composite pattern
Dropdown Menu
A button-triggered menu of commands or choices with managed keyboard navigation.
02
Menus and navigation · composite pattern
Context Menu
A command menu opened for a specific object or pointer location, commonly by right-click or long press.
03
Menus and navigation · composite pattern
Navigation Menu
A structured set of links that helps users move through the primary destinations of a site or application.
04
Menus and navigation · composite pattern
Tabs
A set of layered sections where a row of labels switches one shared content region, with exactly one panel visible at a time.
05
Menus and navigation · semantic pattern
Breadcrumbs
A secondary navigation trail showing the current page position within a site hierarchy, with links back to ancestor levels.
06
Menus and navigation · composite pattern
Pagination
A row of numbered links or buttons that lets users move between pages of a list, search result, or gallery without loading everything at once.
07
Menus and navigation · behavior variant
Scrollspy
Scroll-linked in-page navigation that updates one current section link as the reader moves through matching heading targets.
08
Menus and navigation · composite pattern
Steps
A sequence indicator for a multi-stage task that names completed, current, and upcoming steps, often with numbered markers and connectors.
Comparison cluster
Feedback and notices
01
Feedback and notices · message channel
Toast
A brief, non-blocking message about a recent event that may disappear after users have enough time to perceive it.
02
Feedback and notices · semantic pattern
Alert
A brief, important dynamic message announced to users without moving keyboard focus or blocking their task.
03
Feedback and notices · message channel
Notification
A message about an event or state that may persist, include actions, and remain available beyond the immediate moment.
04
Feedback and notices · presentation form
Banner
A prominent page-level message region that persists while a condition, announcement, or required awareness remains relevant.
05
Feedback and notices · presentation form
Callout
A persistent message box placed inside the content flow to explain, warn, or emphasize information next to the content it qualifies.
06
Feedback and notices · presentation form
Badge
A compact label or counter that communicates status, count, or category on or near another element without being a full interactive control.
07
Feedback and notices · message channel
Progress Indicator
A visual indicator of task progress — a determinate bar for known percentage, an indeterminate spinner or ring, or a combination showing remaining time or steps.
Comparison cluster
Progressive disclosure
01
Progressive disclosure · composite pattern
Accordion
A vertically stacked set of interactive headings that reveal or hide their associated content panels.
02
Progressive disclosure · semantic pattern
Disclosure
A button that controls whether one related region of content is visible or hidden.
03
Progressive disclosure · generic behavior
Collapsible
A generic behavior in which a region can collapse or expand; it does not by itself define the surrounding semantic structure.
Comparison cluster
Choice and binary state controls
01
Choice and binary state controls · semantic pattern
Checkbox
A control that represents checked, unchecked, or optionally mixed state for one independent choice or each item in a multiple-choice group.
02
Choice and binary state controls · composite pattern
Radio Group
A labeled set of radio buttons in which no more than one option can be checked at a time.
03
Choice and binary state controls · semantic pattern
Switch
A binary control that represents whether an ongoing setting or feature is on or off.
04
Choice and binary state controls · behavior variant
Toggle Button
A button that stays pressed or not pressed to represent a persistent mode or state while retaining button semantics.
Comparison cluster
Structural containers and states
01
Structural containers and states · composite pattern
Card
A self-contained container that groups related content and optional actions into a recognizable rectangular surface, often with a header, body, and footer.
02
Structural containers and states · composite pattern
Empty State
A purposeful, instructional view shown when a list, search, or content area contains no data, guiding the user toward a first action.
03
Structural containers and states · presentation form
Scrim
A translucent dark layer that covers the page behind a modal surface, blocking interaction and visually separating the modal from the background content.
04
Structural containers and states · presentation form
Skeleton Loader
A placeholder animation that shows the approximate shape of content before it loads — skeleton blocks for predictable layouts, spinners for indeterminate waits.
05
Structural containers and states · generic behavior
Divider
A thin visual line that separates content sections, distinguishes controls in a menu, or marks a thematic break — rendered as an HTML rule, a CSS border, or a menu separator.
06
Structural containers and states · generic behavior
Sticky & Fixed
Two positioning behaviors that keep an element visible during scroll — sticky anchors within a container, fixed anchors relative to the viewport.
07
Structural containers and states · generic behavior
Drag and Drop
A direct-manipulation interaction where users pick up an element and move it to a new position or target zone, with visual feedback for draggable, drag-over, and drop states.
08
Structural containers and states · presentation form
Avatar Group
A compact row or stack of user avatars that represents several people while limiting visible items and summarizing the remainder with a surplus count.