component

A stack of headers, each expanding to reveal its own section of content.

A vertical list of commands with icons, descriptions and dividers, the shared body used inside menus, panels and side sheets.

A modal list of choices that slides up from the bottom of a phone screen in response to something you just did, with cancel at the end.

The same events as a chronological list grouped by day, so the next thing is at the top instead of somewhere inside a grid.

A dialog that interrupts the flow to demand acknowledgement or confirmation of a consequential action before anything else can continue.

The persistent bar across the top of an application carrying its title, navigation, and primary actions.

A short menu of app actions hung off the app icon itself, opened by a long press or a secondary click before the app is even running.

A repeating row of key and value fields with add and remove controls, used for tags, headers and other open ended pairs.

A small image standing in for a person or entity, falling back to initials or a generic glyph when there is no picture.

Several avatars overlapped in a row to show a set of people compactly, with a plus n counter standing for the rest.

The ruled edge of a chart that maps position to value: scale, ticks, and labels that make the marks readable as numbers.

A small marker attached to another element that carries a count or a status and is not interactive on its own.

A prominent message strip, usually spanning the top of a page or section, that stays visible until the user dismisses or resolves it.

Each line of a file labelled with the change that last touched it, so the file answers who and when rather than what it says.

A bar of three to five top level destinations pinned to the bottom edge of a phone screen, with the current destination always marked.

A surface anchored to the bottom edge that slides up over the content, often draggable between a peeked and an expanded height.

A trail of links showing the path from the top of a hierarchy down to the current page, with every level above it clickable on the way back up.

A small formatting bar that appears floating over a text selection and disappears when the selection is dropped.

A control that runs an action when activated, labelled with the thing it does rather than with where it goes.

Buttons set flush against each other so they read as one unit of related actions, usually with shared borders and rounded outer corners only.

A month grid of dates that can be read, navigated and selected from, whether standing alone or living inside a date field.

A boxed note set into the flow of content to carry a warning, tip or aside, coloured by severity and staying put once shown.

A challenge placed in a form to sort people from scripts, from distorted text to a single checkbox that watches how you got there.

A bounded surface holding a preview of one thing, usually an image, a title, some detail and one or two actions, that as a whole leads somewhere.

A row of items shown a few at a time that advances by arrows, swipe or a timer, with the rest waiting off screen.

A select whose options open level by level, each choice narrowing the next, used for country then state then city style data.

The running count beside a text box showing how many characters are used, or how many remain, against a limit.

A drawing of data in which position, length, angle or colour carries the numbers, chosen so the comparison a reader needs is the easiest one to see.

A note pinned onto the data itself: a callout, arrow, or highlighted span that tells the reader what to see in the chart.

The key beside a chart that decodes series colours and symbols into names, and the first thing direct labeling tries to delete.

A rounded container for one message in a conversation, aligned and coloured by who sent it, often with a tail toward the sender's side.

A square control that turns one independent option on or off, used in sets where any number of the options may be chosen.

The small angle bracket used as a directional marker: down means this opens, right means this goes deeper, in breadcrumbs it means next level.

A compact, rounded element holding one value, which can usually be selected, removed, or both.

The small dismiss control in the corner of a dialog, banner or panel, drawn as an X and named Close rather than X.

A temporary message anchored to a control that teaches what it does, often chained into a numbered sequence across a screen.

A text area specialised for code, with a gutter of line numbers, syntax colouring and a caret that understands indentation.

A control for choosing a colour, usually pairing a saturation and lightness field with a hue slider, an alpha slider and a text field for a value.

The small filled square that shows the current colour and opens a colour picker when pressed.

The invisible strip on a column border that widens or narrows the column when dragged, and often fits the column to its content on double click.

A text input paired with a list of suggestions that narrows as you type, where the list can be navigated and chosen from with the keyboard.

A keyboard-summoned overlay whose single search box finds and runs any command or destination in an application by name.

A table whose columns are options and whose rows are features, read across to decide between plans or products.

A slot on a watch face filled with one live figure from an app, sized to be read in the second a wrist is raised.

A modal that stops an action part way through to ask whether you meant it, naming the consequence in its confirm button rather than saying OK.

A year of days as a grid of week columns, each cell shaded by how much happened that day, so a habit reads as a pattern instead of a number.

A small control beside a value that copies it to the clipboard and confirms by turning into a tick for a second or two.

A spreadsheet-like table where individual cells take focus and can be edited, navigated cell by cell with the arrow keys.

A table built for working with data rather than reading it: sortable columns, selectable rows, and controls that act on the rows you select.

A field that opens a small calendar so a date can be chosen by looking at the month rather than typing it.

A calendar that takes a start and an end date in one pass, highlighting the span between them as you move.

Paired labels and values laid out as a list of facts about one thing, rather than as a table of many things.

The view that puts two versions of a text against each other, side by side or interleaved, marking every line added, removed or changed and aligning what did not.

A single button that shows and hides one region of content, reporting its state through aria-expanded.

The small triangle beside a tree item that points right when collapsed and down when open, rotating as it toggles.

A thin line separating groups of content, decorative when the grouping is already clear and semantic when it is the only cue.

A persistent strip of application icons anchored to a screen edge, holding launchers, running apps and pinned items in one row.

The small gripped area, often drawn as rows of dots or lines, that marks where an item may be picked up and dragged.

A panel docked to one edge of the screen that slides in over the content, holding navigation or the details of the thing you selected.

The loose everyday word for any panel that opens downward from a trigger, whatever the panel holds and whatever the trigger does with it.

A control that leaves the current page immediately for an unrelated site and tries to clear it from history, for readers who may be watched.

A searchable grid of emoji organised by category, with recent choices remembered and skin tone chosen once.

Whiskers on a mark showing the range a value could plausibly take, so a chart does not imply precision it does not have.

The line attached to a field that says what went wrong and what to do about it, announced to assistive technology the moment it appears.

A table row that opens to reveal a detail panel beneath it, keeping the row in place instead of navigating away.

A tool that turns the cursor into a sampler so a colour can be picked from anywhere on screen, usually with a magnified preview of the pixel under it.

A panel of grouped checkboxes and ranges that narrows a result set, each option usually showing how many results it would leave.

A group of related form controls sharing one question, with a legend that acts as the label for the whole group.

An image, table or code block bound to its caption so the two travel together and can be referred to from the running text.

A row or card standing in for a file, showing its type, name and size, with the one action that file supports: download, open or remove.

A control that takes files, by opening the system picker from a button or by accepting a drop into a marked area.

A scrollable row of thumbnails beside a larger view, where picking one changes what the large view shows.

Stacked bars where width is time spent and depth is call nesting, so the widest plateau rather than the tallest tower is the thing worth fixing.

A round, raised button that hovers above the content in a fixed corner, carrying the one action the screen is most for.

A label that sits inside an empty field and rises to the field's top edge when the field takes focus or holds a value.

A diagram of steps in boxes joined by arrows, read rather than operated, and now more often generated from a few lines of text than drawn by hand.

A grouping of controls a reader fills in and submits together, carrying the labels, validation and submit affordance for the whole set.

One row per task with a bar along a time axis, the bar showing when the work runs and lines between bars showing what waits for what.

A dial style readout showing one value on an arc between a minimum and a maximum, borrowed from instrument panels.

A button with no fill and often no border until you hover it, sitting at the bottom of the emphasis ladder above a plain link.

The short rounded bar drawn at the top of a bottom sheet to say the surface can be dragged.

A button of three stacked horizontal lines that opens a site's main navigation, usually in a panel over the page.

The short line under a field that explains the format or constraint before anything goes wrong.

A rich preview panel that appears on hover over a link or an avatar, summarising what is behind it.

A small dark translucent floating window of controls that hovers over content without taking it over, common in media and creative tools.

A small graphic symbol standing for an action, object or idea, read at a glance and rarely safe to ship without a label.

A button whose whole label is an icon, so it needs an accessible name and usually a tooltip to say what it does.

A generated default avatar derived deterministically from an identifier, so the same account always gets the same abstract pattern without uploading anything.

An embedded picture, sized and cropped by the layout around it, carrying the alternative text that stands in when it cannot be seen.

Two images stacked with a draggable divider that wipes between them, used to show a before and an after in one frame.

An editable image view that shows its current picture and accepts a replacement dragged or pasted straight into it.

Text that reads as plain content until you click it, at which point it becomes an input in the same place with save and cancel.

A field welded to text, a button or a select at one or both ends, so the addon reads as part of the same control rather than as a neighbour.

A field that imposes a fixed shape as you type, inserting the slashes, spaces or brackets a phone number or card number needs.

A menu of secondary actions opened from a trigger of three vertically stacked dots, usually at the end of a row, card, or toolbar.

A key drawn as a small keycap in running text or a menu, so a shortcut reads as something you press rather than something you say.

The panel opened by pressing question mark that lists every shortcut in the application, grouped by area.

A round control turned by dragging in an arc, borrowed from hardware and mostly found in audio and creative tools.

An overlay that shows one image or video large over a dimmed page, with next and previous controls and a dismiss.

A control that navigates somewhere, named for its destination, and carrying the browser affordances of a destination (open in new tab, copy address).

A vertical run of related items presented as a set, where the shared shape of every row is what tells a reader the rows belong together.

An always visible list of options you choose from with the keyboard or pointer, without a popup or a text field.

A persistent, updating view of something in progress, shown in system places like a lock screen so a reader can follow it without opening the app.

An overflow menu whose trigger is three horizontal dots, usually sitting at the end of a row or a card.

The cluster of play, pause, skip, volume and fullscreen controls attached to a player, which usually hides itself while playing.

A large navigation panel that drops from a top level item and shows many links at once, grouped into columns with headings.

A permanent horizontal row of menu titles (File, Edit, View) whose menus open on click and then follow the pointer along the row.

A small application controlled item living in the system menu bar or tray, usually an icon that opens a compact panel of status and controls.

A button whose only job is to open a menu, marked with aria-haspopup and usually drawn with a downward chevron.

A gauge of a known quantity within a known range, such as disk used or password strength, where the level is a fact rather than a task.

A shrunken overview of a long document or canvas beside the scrollbar, with a box showing which part is currently on screen.

A window that opens over the page and takes control of it, so nothing behind can be used until the dialog is answered or dismissed.

The control in an assistant interface that picks which model answers, usually a menu carrying a short description of each option.

A select that accepts several values at once, usually showing the chosen ones as removable tokens inside the field.

The horizontal strip of primary destinations across the top of a site, usually holding the logo, the main sections and an account control.

A menu of destinations rather than commands, where opening an item moves you somewhere instead of running an action.

A narrow vertical strip of top level destinations at the side of a screen, used at medium widths where a bottom bar is wasteful and a drawer is too heavy.

A canvas of boxes wired to each other by lines, where each box does one job and the wiring between them is the thing being built, rearranged by dragging.

The typed stub on a node where a wire may land, coloured or shaped by what it accepts, so a connection that would make no sense refuses to complete.

A panel collecting notifications that were missed or kept, usually opened from a bell with an unread count.

A small panel of controls that floats just outside a window edge in visionOS, staying with the window without covering its contents.

A menu holding the actions that do not fit in the visible interface, opened from one compact trigger.

The row of small dots under a carousel or onboarding screen showing how many pages there are and which one you are on.

The numbered row of page links under a long result set, with previous and next controls and usually an ellipsis where numbers are skipped.

The control inside a password field, usually an eye or the word Show, that switches the characters between masked and readable.

A row of single character boxes for a short code, where typing advances to the next box and pasting the whole code fills them all.

The marker showing the current position in a timeline or track, which travels during playback and can be dragged to move it.

A small confirmation bubble anchored to the control you just pressed, asking whether you meant it without opening a dialog over the page.

A small surface anchored to the control that opened it, holding content or controls of its own, and dismissed by clicking away or pressing Escape.

The small triangle joining a popover or tooltip to the thing it belongs to, which flips and slides as the popover repositions.

The small coloured dot on an avatar reporting whether a person is available, away, busy or offline.

A filling bar reporting how far along a task is, determinate when the end is known and indeterminate when it is not.

A circular progress indicator that fills around a ring, often with the percentage in the middle.

The composer at the bottom of an assistant interface: a growing text area with attachment, model and send controls attached to it.

A search field that builds structured queries from tokens, letting a reader filter by named properties with operators rather than free text.

A system delivered message shown outside the app, on a lock screen or in a notification list, that has to earn the interruption it costs.

A square matrix barcode rendered in the interface to hand a link or credential to a phone camera.

A one tap button or toggle an app contributes to the system control surface, so one feature can be reached without opening the app.

A menu whose items sit around the point of invocation, so a choice is made by direction and distance rather than by reading a list.

A set of mutually exclusive options, each with its own label and control, exactly one of which can be chosen.

A slider with two handles on one track that sets a lower and an upper bound, so the selection is an interval rather than a point.

A row of stars or similar marks that both shows a score and, when interactive, takes one.

A small row of emoji that appears on hover or long press so a message can be answered without a reply.

A line drawn at a meaningful value across a chart: a target, a threshold, an average, a before-and-after moment.

A time printed as a distance from now, two hours ago or in three days, updating itself and holding the exact time in its tooltip.

The small corner grip that lets you drag an element or window bigger and smaller, drawn as diagonal ridges on a textarea or window corner.

A tall tabbed toolbar that replaces menus, grouping commands into labelled sections with the important ones drawn larger.

An editing surface that shows formatting as it will appear rather than as markup, so what the writer sees is close to what readers get.

The strip of formatting controls above or beside an editor, whose buttons report their state from wherever the caret sits.

A grid of days crossed with hours where each event is a block in its own slot, so a week's free time is visible and an event is moved by dragging it.

The row of category buttons directly under a search field that narrows what the query searches, such as All, Mail, Files.

The bar beside a scrollable region whose thumb shows both how much content there is and where in it you are.

The seek control of a media player: a track showing elapsed and buffered time with a playhead you drag to move through it.

A text input specialised for queries, with a magnifier, a clear control and often suggestions that appear as you type.

A single control holding two to five mutually exclusive options side by side, with the current one shown as a filled segment.

A closed control that shows the current choice and opens a list of options when pressed, with no typing.

A radio or checkbox dressed as a card, where the whole tile is the target and the control itself is small or absent.

The system panel of destinations and actions for sending the current item elsewhere, populated by whatever apps are installed.

The control at the end of clamped text that expands it to full length and, when honest, collapses it again.

A drawing area that captures a handwritten signature by pointer or touch, with a clear control and a baseline to sign on.

A control that sets a value by dragging a handle along a track, showing the whole range at once.

The small arrow in a column header showing that the table is sorted by that column and in which direction.

A tiny chart with no axes or labels, drawn inline at text size to show the shape of a trend beside the number it belongs to.

A floating action button that fans out into three to six smaller related actions when pressed or hovered.

An indeterminate loading indicator that shows work is happening without saying how much of it is left.

A two part control where the main area runs a default action and an attached arrow opens a menu of related alternatives.

The draggable bar between two panes that changes how much room each one gets, keyboard operable as a slider between limits.

A single number shown large with a label and often a change indicator, the unit a dashboard is built from.

A row or column of numbered stages showing where you are in a multi step flow and what remains.

A small two part control with minus and plus that nudges a number up or down one step at a time.

A menu that opens sideways from a menu item, marked by a trailing arrow, and stays open while the pointer travels diagonally toward it.

A control shaped like a sliding track that turns one setting on or off and applies the change the moment it is flipped, with no separate save step.

A set of labelled panels in one region, where selecting a label swaps the panel beneath it.

A small label attached to an item to classify it, often coloured by category and sometimes removable.

A field that turns each entry into a removable tag sitting inside the field, with the caret waiting after the last one.

A tall modal anchored to the bottom of the viewport that holds a multi step creation flow, stackable when one flow opens another.

A multi-line text box, usually resizable, for input that will not fit on one line: a comment, a description, an address, a note.

A single line box for typed input, carrying a label, an optional hint, and the error message shown when what was typed does not pass.

Three versions on screen at once, mine, theirs, and the ancestor they both came from, with the result edited underneath so a conflict is decided rather than guessed.

A small stand-in image for a larger one, cropped rather than letterboxed so a row of them lines up.

The small notches printed along a slider track that show the discrete stops the handle can land on.

A control for choosing a time of day, either as a dial you tap around or as hour and minute lists.

A vertical or horizontal line of dated events, each pinned to the line by a marker and reading in order.

The strip along the top of a window carrying its title and window controls, and the region you drag to move the window.

A brief, self-dismissing message that appears at a screen edge to confirm an action or report status without interrupting the user's flow.

A button that stays pressed, reporting an on or off state through aria-pressed rather than firing and returning.

A set of toggle buttons treated as one control, either single select like radios or multi select like a row of formatting toggles.

A tip revealed by clicking rather than hovering, so it works by touch and may contain links or controls a tooltip could not.

A grouped row of controls acting on the current view, sharing one tab stop and moving focus between its items with arrow keys.

A brief text label shown on hover or keyboard focus that names or explains the element it points at, and carries nothing you can interact with.

The view that lays a request's spans on one time axis, each nested under the span that called it, so the bar that is too long or starts too late is the finding.

The groove a slider thumb or scrollbar travels along, usually drawn as filled before the handle and empty after it.

Two side by side lists with arrow buttons between them, used to move items from available to chosen and back.

A table whose rows nest and expand like a tree, so hierarchy and columns of data coexist in one grid.

A select whose popup is a tree, so options can be chosen at any depth with parents collapsing over their children.

A nested list where branches expand and collapse in place, navigated with arrow keys as a single tab stop.

The three bouncing dots shown while someone is composing a reply, or while an assistant is preparing one.

A persistent bar docked to the bottom of an application holding small tools that open into panels without leaving the current page.

A framed video with the controls needed to play, seek, mute and caption it, sized so the controls never crowd the picture.

The on screen keyboard a device raises for a field, whose key set the field itself chooses by declaring what kind of value it wants.

Repeating faint text or a mark tiled across content to claim it or to mark it as a draft or a preview.

An audio track drawn as a row of amplitude bars, used both to show what is in the file and as the surface you scrub along.

A full width introduction shown on first entry to a feature, listing what is new or what to set up, with a way to skip it for good.

A spinning drum of values that snaps to the item under a fixed selection line, the iOS way of choosing from a short list.

A small, glanceable view of an app placed on a system surface such as a home screen or desktop, sized in fixed slots rather than freely.

The cluster of close, minimise and zoom controls in a window's title bar, three coloured dots on macOS and three glyphs on Windows.

A flow broken into ordered steps with back and next controls, where each step validates before the next one is allowed.

Alternating row backgrounds in a table so the eye can track a single row across many columns.