UI Components & Patterns

The territory

30 core terms mapped for this field, ranked by how often builders reach for them. Each one is a future entry. Want to bust one? One entry, one file, one pull request.

• Modal dialogBlocking overlay requiring action or dismissal before returning"the popup that greys out everything behind it" · "the box you have to close first"
• Command paletteKeyboard-summoned overlay for searching and running any app action"that Cmd+K search thing" · "the Spotlight-style box inside an app"
• Bottom sheetPanel sliding up from screen bottom, draggable between snap heights"the thing that slides up from the bottom on mobile" · "half-screen popup"
• ComboboxText input plus filtered dropdown; also called typeahead or autocomplete"a dropdown I can type into" · "search-as-you-type select"
• PopoverSmall floating panel anchored to the element that opened it"little card that pops out of a button" · "bigger than a tooltip, smaller than a modal"
• TooltipShort contextual label revealed on hover or keyboard focus"the little grey label when you hover over something" · "hover hint"
• ToastBrief self-dismissing message floating above the interface"the little 'Saved!' popup in the corner" · "flash message"
• Skeleton screenGrey placeholder shapes standing in for content while loading"the pulsing grey boxes before stuff loads" · "loading ghost"
• Overflow menuCompact button revealing secondary actions that don't fit inline"the three dots menu" · "kebab menu"
• Context menuRight-click or long-press menu of actions for the target"the right-click menu" · "the menu you get from pressing and holding"
• DrawerPanel sliding in from a screen edge over content"side panel that slides in" · "off-canvas menu"
• Empty stateDesigned screen shown when a list or view has nothing"what you see before there's any data" · "the zero-items screen"
• Segmented controlPill of two-plus exclusive options, exactly one always selected"iOS-style toggle with two or three tabs" · "switcher pill"
• ChipSmall rounded label for tags, filters, or selected values"those little pill tags" · "bubble labels you can X off"
• BreadcrumbsTrail of parent links showing depth in a hierarchy"the Home > Section > Page trail at the top" · "the little arrow path"
• WizardMulti-step flow with visible progress through numbered stages"stepper" · "form split across steps with dots at top" · "checkout-style multi-page form"
• Data gridSpreadsheet-like table with sorting, resizing, and inline cell editing"an Excel-ish table inside the app" · "editable table with frozen bits"
• AccordionStacked headers expanding to reveal one section at a time"click-to-expand FAQ list" · "collapsible sections"
• List-detail viewList pane beside a pane showing the selected item"master-detail" · "Mail-app layout, list on left, content on right" · "two-pane view"
• Faceted filterGrouped checkbox and range filters narrowing results, often with counts"Amazon-style filter sidebar" · "filter panel with numbers next to options"
• DropzoneBordered target accepting dragged files, with a browse fallback"the dashed box you drag files onto" · "drag-and-drop upload area"
• Notification badgeSmall count or dot overlaid on an icon corner"the little red number on the icon" · "unread dot"
• Date range pickerDual-calendar control for selecting a start and end date"the two-calendar from/to thing" · "booking-style date selector"
• Floating action button (FAB)Persistent round primary-action button hovering above scrolling content"the round plus button in the corner" · "the big circle button"
• Split buttonButton with an attached caret opening alternate related actions"button with a little arrow beside it" · "dropdown button"
• Tree viewNested expandable hierarchy list, like a file explorer sidebar"the folder sidebar with twisty arrows" · "nested list you can expand"
• Mega menuWide multi-column dropdown grouping many navigation links"the big panel that drops down from the nav" · "giant dropdown with columns"
• Tab barFixed bottom row of primary destinations on mobile"the bottom icon bar in apps" · "mobile nav strip"
• Inline editEditing a value in place rather than in a separate form"click the text and it turns into a field" · "edit-in-place"
• CalloutBoxed tinted inline note flagging tips, warnings, or caveats"those coloured info boxes in docs" · "admonition block"

Deeper in the field

• Dropdown menu Triggered list of actions displayed in a floating panel
• Select Form control for choosing one option from a list
• Tabs Controls switching between sibling content panels within one context
• Card Bounded surface grouping related content and actions
• Sidebar Persistent vertical region for navigation or supporting controls
• Toolbar Group of controls for related actions or formatting
• Toggle switch Binary control whose change usually takes effect immediately
• Badge Compact label communicating status, category, or metadata
• Snackbar Brief status message that can include a contextual action
• Progress bar Linear indicator showing task or loading completion
• Pagination Controls for navigating discrete pages of results
• Carousel Swipeable or rotating sequence of content panels
• Slider Track-and-thumb control for selecting a value within a range
• Flyout submenu Nested menu opening sideways from a parent menu item
• Resizable split pane Panes divided by a draggable gutter the user can resize
• Kanban board Columns of draggable cards representing items moving through stages
• Navigation rail Narrow icon-only vertical sidebar, optionally expandable to labels
• Scrollspy nav Anchor list that highlights the section currently in view
• Token input Field where entered values become removable tokens inside the box
• Radio cards Large selectable cards behaving as an exclusive radio group
• Quantity stepper Numeric field flanked by minus and plus increment buttons
• Dual-handle range slider Track with two thumbs setting a minimum and maximum
• Indeterminate progress indicator Looping bar or spinner when completion percentage is unknown
• Data table with sticky header Table with pinned header row and optionally frozen leading columns
• Announcement bar Full-width dismissible strip at the top of the page
• Inspector panel Side panel exposing properties of the currently selected object
• WYSIWYG editor Rich-text editing surface rendering formatting as you type
• Coach mark Spotlight tooltip highlighting one element during first-run onboarding
• Scrim Dimmed translucent layer separating a modal from content behind
• Avatar stack Overlapping profile pictures showing group members plus an overflow count
• Contextual formatting toolbar Floating formatting toolbar over a text selection, also called a bubble menu
• Lightbox Full-screen overlay viewer for an image or gallery
• Comparison slider Draggable divider wiping between before and after images
• OTP input Row of single-character boxes for entering verification codes