UI concepts, A to Z

A vertical set of headings that reveals or hides each associated content section.

A modal dialog that interrupts a consequential action and requires an explicit confirm or cancel decision.

A prominent, persistent message spanning a page region to communicate a condition that affects broad page use.

A mobile-oriented surface attached to the bottom edge that can open to stable heights and may support dragging.

An ordered trail of links to ancestors of the current page that exposes its place in a site hierarchy.

A named control that performs an action in the current interface when activated.

An independent binary choice that can be checked, unchecked, or sometimes indeterminate.

A value control with an associated popup; it can be editable or select-only, and the popup can be a listbox, grid, tree, or dialog.

An interactive tabular composite that manages one keyboard entry point and directional focus among cells, often adding editing or selection.

A temporary panel that slides from a viewport edge, overlays the page, and closes when its focused task is finished.

A compact list of actions that opens from a button and supports menu-style keyboard navigation.

Easing maps elapsed time to progress along a fixed-duration animation. It changes the pace, not the destination.

A compact button represented visually by an icon but still given its own stable accessible action name.

A persistent message placed next to the content or task it explains, with urgency chosen from the actual update.

A modal viewer that enlarges one media item and may let the user move through a related collection.

A named connection to another destination that preserves standard browser navigation behavior.

A composite widget of named options that supports one or multiple selections and can be standalone or used as a combobox popup.

A focused surface for a contained task that makes the rest of the page temporarily inactive.

A set of navigation links that moves among peer pages of one content collection split by quantity.

A small contextual surface opened deliberately to show supporting content or controls without making the whole page modal.

A visual and semantic indicator for task completion: it exposes a value within a known range when measurable and remains indeterminate when no reliable value exists.

A named set of mutually exclusive choices where selecting one option clears the previous selection.

Reduced motion honors a user's preference for less movement. A fallback preserves the same information when motion is disabled or unavailable.

A text input inside a named search form that submits a query to find matching content.

A visually joined group of adjacent options that selects one value from a small set.

A form control for choosing one or more values from predefined options without arbitrary text entry; a single-select commonly appears as a closed picker, while a multiple select may expose a list.

A persistent region beside primary content that participates in page layout and usually contains navigation or supporting tools.

Decorative placeholder shapes that reserve the approximate layout of content while that content is loading.

Skeleton shimmer adds a moving highlight to a placeholder while content is pending. It gives no percentage or promise about remaining time.

A compact animated indicator for work whose completion amount is unknown, paired with a meaningful busy status.

A spring approaches a target using stiffness, mass and damping. Low damping can overshoot; higher damping removes oscillation.

A state transition changes meaningful interface state, such as Draft to Saved. Animation can reinforce that feedback; it must never determine whether saving succeeded.

A progress summary that distinguishes completed, current, and upcoming stages in a meaningful linear process.

A binary control that exposes a setting as on or off.

A non-widget tabular structure that relates static data through rows, columns, and their headers.

A set of labels that switches between related content panels while keeping one panel visible at a time.

A labeled single-line control for entering or editing one textual value.

A labeled control for entering or editing free-form text across multiple lines.

A brief nonblocking message that appears after an event and may disappear after enough reading time.

A short, noninteractive hint that appears when a control receives pointer hover or keyboard focus.

A composite widget for navigating hierarchical items whose parent nodes can expand or collapse their child groups.