UI Components & Patterns

Busted

• AccordionStacked headers that expand to reveal one or more content panels. The click-to-open FAQ list.
• Announcement barA full-width strip at the top of a page for a short sitewide message, often with a link and close button.
• Avatar stackA compact row of overlapping profile pictures that shows group members, with a '+N' circle for everyone who does not fit.
• BadgeA small label such as Beta, Draft, or Pro that marks an item's status, category, or other quick metadata.
• Bottom sheetA panel that slides up from the bottom of the screen and can be dragged between heights or flicked away.
• BreadcrumbsThe Home > Section > Page trail at the top of a page, showing where you sit in the hierarchy and how to climb back up.
• CalloutA tinted box inside your content flagging a note, tip, warning, or danger, usually with an icon and a colored border.
• CardA bounded box that keeps one item's image, text, metadata, and actions together as a scannable unit.
• CarouselA row of images or cards that shows a few at a time and moves sideways with swipes, arrows, or pagination dots.
• ChipA small rounded pill standing in for one tag, filter, or selected value, usually with an X to remove it.
• Coach markAn onboarding tip that points to one interface element, often spotlighting it while the rest of the page is dimmed.
• ComboboxA text field that filters a dropdown as you type, so you can search a long list instead of scrolling it.
• Command paletteA keyboard-summoned search box that finds and runs any action in the app, usually opened with Cmd+K.
• Comparison sliderA draggable divider that wipes between two aligned images so you can inspect a before-and-after change in the same spot.
• Context menuThe menu that appears right where you right-clicked or long-pressed, listing actions for that exact thing.
• Contextual formatting toolbarA small formatting bar that floats next to selected text, putting controls like bold, italic, and link beside the words being edited.
• Data gridA spreadsheet-grade table: sort, resize, freeze columns, and edit cells in place without leaving the row.
• Data table with sticky headerA scrolling table that keeps its column headings, and sometimes its first columns, visible as the data moves.
• Date range pickerA calendar (usually two months side by side) where you click a start date and an end date to select everything between.
• DrawerA panel that slides in from a screen edge, either covering the page with a dimmed layer behind it or docking beside it.
• Dropdown menuA button-triggered list of actions that floats over the page, like the menu under an account avatar or File button.
• DropzoneThe dashed-border box you drag files onto to upload, which also lets you click it to browse.
• Dual-handle range sliderA slider with two draggable handles for choosing the lowest and highest values of a range.
• Empty stateThe designed screen for when a list has nothing in it: says why it's blank and gives you the one action that fills it.
• Faceted filterThe filter sidebar with grouped checkboxes and result counts, like refining a shopping search by brand, size, and price.
• Floating action button (FAB)The round button hovering over the bottom-right corner of the screen, holding the one action that screen exists for.
• Flyout submenuThe second menu that pops out sideways when you hover, click, or arrow into an item that has more choices.
• Indeterminate progress indicatorA looping spinner or moving bar that shows work is happening when the app cannot calculate a percentage.
• Inline editEditing a value right where it sits: click the text, it becomes an input, you type, it saves. No separate edit form.
• Inspector panelA side panel that shows and edits the properties of whatever object is currently selected.
• Kanban boardThe board of task cards you drag across columns such as To do, In progress, Review, and Done.
• LightboxA full-screen image viewer that opens over the page, often with a dark backdrop and controls for moving through a gallery.
• List-detail viewA list of items on one side, the selected item's full content on the other. The layout every email client uses.
• Mega menuA wide multi-column panel that drops from a nav item, showing whole site sections at once instead of a thin list of links.
• Modal dialogA window that takes over the screen and blocks everything behind it until you act on it or close it.
• Navigation railThe skinny vertical app menu made mostly of icons, often expandable into a wider sidebar with labels.
• Notification badgeThe small red count or dot sitting on the corner of an icon, telling you something is waiting for you.
• OTP inputA row of one-character boxes for entering the short verification code sent by text, email, or an authenticator app.
• Overflow menuThe three-dots button that hides secondary actions until you click it, so only the actions people actually use stay on screen.
• PaginationThe row of Previous, 1, 2, 3, and Next controls that splits a long result list into pages and lets you jump between them.
• PopoverA small floating panel anchored to the button that opened it, holding real content and controls.
• Progress barThe horizontal bar that fills up to show how much of an upload, download, or other task is complete.
• Quantity stepperA number field with minus and plus buttons for decreasing or increasing the value one step at a time.
• Radio cardsA set of large option cards where choosing one automatically deselects the others.
• Resizable split paneTwo side-by-side panels separated by a divider you can drag to give one panel more room and the other less.
• ScrimThe translucent dark layer behind a modal that dims the page and shows that the content underneath is temporarily blocked.
• Scrollspy navThe table of contents that highlights your current section as you scroll through a long page.
• Segmented controlA pill split into a few exclusive options with exactly one always selected. The iOS-style Day / Week / Month switcher.
• SelectA form field that opens a list and stores one chosen option, such as a country, timezone, or shipping speed.
• SidebarA vertical area beside the main content that keeps navigation, filters, or supporting controls close at hand.
• Skeleton screenGrey placeholder shapes in the layout of the content that is loading, so a page looks like it is filling in rather than frozen.
• SliderThe track with a knob you drag to choose a value, like volume, brightness, zoom, or a price limit.
• SnackbarA short-lived message near the bottom of the screen, often with one action such as Undo.
• Split buttonA button with a small arrow attached: the big part does the default thing, the arrow opens related variants of it.
• Tab barThe fixed row of icons at the bottom of a mobile app that switches between its main sections and stays put wherever you are.
• TabsA set of labels that switches one area between sibling views, like Overview, Activity, and Settings.
• ToastA small self-dismissing message that floats over the interface to confirm something happened, then leaves on its own.
• Toggle switchAn on or off control that looks like a sliding switch and usually applies the new setting immediately.
• Token inputA text field where each accepted value becomes a small removable pill inside the box.
• ToolbarA compact strip of related controls, such as the Bold, Italic, alignment, and link buttons above an editor.
• TooltipA tiny label that appears on hover or focus to say what something does. Text only, and never the only copy.
• Tree viewA nested list of expandable rows, like a file explorer sidebar: each twisty arrow opens the children underneath it.
• WizardA long task chopped into ordered steps with Back and Next, plus a progress stepper showing how far you have to go.
• WYSIWYG editorA rich-text box where bold, headings, links, and other formatting appear directly as you type.

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