UI Element Compendium

ABAC

Attribute-Based Access Control.

AI Action

Action initiated or recommended by AI.

AI Assistant

UI for interacting with an AI system.

AI Confidence

Indication of confidence in an AI result.

AI Copilot

AI assistant embedded within an existing workflow.

AI Recommendation

AI-generated suggested decision/action.

AI Status

Indicates AI processing state.

ARIA

Accessible Rich Internet Applications specification.

ARIA Label

Accessible name/description.

ARIA Role

Semantic role exposed to assistive technology.

About Section

Section describing the business or people behind it.

Above the Fold

Content visible before any scrolling.

Accent Colour

Highlight colour for important interactions.

Access Control

System for controlling access.

Access Denied

UI indicating insufficient permission.

Accessibility

Designing software usable by people with different abilities.

Accessible Error

Error communicated accessibly.

Accessible Name

Name exposed to assistive technology.

Accordion

Expandable/collapsible sections.

Account Switcher

Switches user accounts.

Action Card

Card primarily encouraging an action.

Action List

List of available actions.

Action Sheet

Mobile-style collection of actions.

Active

Element is being activated/interacted with.

Activity Feed

Chronological record of activity.

Activity Log

Chronological activity history.

Adaptive Layout

Layout switching between predefined configurations.

Advanced Search

Detailed search interface.

Affordance

Visual indication of how an element can be interacted with.

Agenda View

Chronological event list.

Agent

AI system capable of performing multi-step tasks.

Agent Activity

Record of agent actions.

Agent Status

Current agent state.

Agent Workspace

UI/environment in which an agent operates.

Alert

Important message requiring attention.

Alert Dialog

Presents important information.

Alignment

Positioning elements along common edges/axes.

Alt Text

Text description of an image.

Ambiguous Icon

Icon whose meaning is unclear.

Anchor

Link to a location, commonly within a page.

Animation

Change of visual properties over time.

Announcement Bar

Slim persistent bar above the header for offers or notices.

Apply

Applies changes without necessarily closing the UI.

Appointment

Scheduled meeting/activity.

Approval

Explicit authorisation step.

Approval Notification

Notification related to approval.

Approval Queue

Collection of pending approvals.

Area Chart

Filled line chart.

Article Layout

Page layout for long-form written content.

Aside

Secondary contextual area.

Aspect Ratio Box

Container preserving a fixed width-to-height ratio.

Assignee

Person responsible for work.

Assignee Selector

Assigns responsibility.

Assignment Notification

Notification caused by assignment.

Atomic Component

Very small reusable component.

Attachment

File associated with content.

Attachment List

Files attached to an object/message.

Audio Player

Component for audio playback.

Audit Log

Record of system/user actions.

Author Byline

Attribution line showing author and date.

Autocomplete

Suggests matching values during entry.

Autoplay

Media that begins playing without user action.

Autosave Indicator

Shows content is being saved automatically.

Availability Block

Period of availability.

Avatar

Visual representation of a person.

Avatar Group

Multiple avatars grouped together.

Axis

Measurement scale.

Back Navigation

Returns to previous view.

Backdrop

Background layer behind an overlay.

Background

Underlying visual layer.

Background Refresh

Data updates without blocking the UI.

Background Video

Ambient video used as a section background.

Backlog

Collection of pending work.

Badge

Compact status/count indicator.

Banner

Persistent page-level message.

Bar Chart

Values represented by bars.

Before/After Slider

Draggable divider comparing two images.

Benefits Section

Section framing features in terms of user outcomes.

Bidirectional Text

Mixed-direction text handling.

Billing Toggle

Switch between monthly and annual pricing display.

Block

Individual unit of content within a block editor.

Block Editor

Editor composing content from discrete blocks.

Blocker

Issue preventing progress.

Blockquote

Formatted block for quoted text.

Blog Card

Summary block for an article.

Booking Widget

Embedded appointment or reservation interface.

Border

Edge around an element.

Bottom Navigation

Mobile navigation at bottom of screen.

Bottom Sheet

Bottom-mounted temporary panel.

Box Model

Content, padding, border and margin model.

Breadcrumb

Hierarchical location indicator.

Breakpoint

Width at which layout changes.

Bubble Chart

Scatter plot using bubble size as another dimension.

Bulk Action

Action applied to multiple records.

Bulk Editing

Edit multiple records together.

Bulk Operations

Actions performed on many records.

Bulk Selection

Selection intended for bulk operations.

Burndown

Remaining work over time.

Burnup

Completed/total work over time.

Busy Block

Period when a resource is unavailable.

Button

Performs an action.

Button Group

Related buttons grouped together.

Button Group Selector

Selection through grouped buttons.

Button Soup

Too many competing buttons/actions.

CRUD

Create, Read, Update, Delete.

CSR

Client-Side Rendering.

CSS

Cascading Style Sheets.

CSS Grid

Two-dimensional layout system.

CSS Variable

Reusable CSS custom property.

CTA

Call-to-action.

CTA Section

Dedicated section prompting the primary action.

Cache

Stored copy of data for faster access.

Cache Invalidation

Process of marking cached data as outdated.

Calendar

Date-based event display.

Calendar Filter

Restricts visible events.

Calendar Overlay

Calendar displayed alongside another calendar.

Callback

Function supplied to another component/function.

Cancel

Abandons current operation.

Canvas

Free-form visual workspace.

Capacity Indicator

Shows available workload capacity.

Card

Self-contained content/action block.

Card Body

Main card content.

Card Footer

Supporting actions/content.

Card Header

Card title/context area.

Carousel

Rotating sequence of content panels.

Cascading Select

Selection changes available options in another control.

Case Study Card

Summary block linking to a detailed customer story.

Cell Editing

Editing an individual cell.

Cell Selection

Selecting individual cells.

Certification Badge

Displays a certification.

Changelog

Record of product changes.

Character Counter

Live count of characters entered.

Chart Tooltip

Detailed information shown for a data point.

Chat Bubble

Individual chat message.

Chat Interface

Conversational UI.

Checkbox

Independent selection control.

Checked

Checkbox/radio is selected.

Child Component

Component nested inside another.

Chip

Compact interactive or informational label.

Citation

Source reference associated with generated content.

Clear Filters

Removes active filters.

Click

Pointer activation.

Client State

State maintained in the browser/application.

Close

Dismisses an interface element.

Coachmark

Contextual callout pointing at a UI element.

Code Block

Formatted block for code snippets.

Code Splitting

Divide application code into smaller bundles.

Collaborative Cursor

Shows another user's current cursor.

Collapse

Hide previously visible content.

Collapsed

Component is closed.

Colour

Visual colour value.

Colour Contrast

Visual difference between foreground/background.

Colour Picker

Colour selection control.

Colour Token

Named colour value.

Column

Vertical grouping.

Column Actions

Actions attached to a column.

Column Chart

Vertical bar chart.

Column Chooser

Selects visible columns.

Column Grouping

Groups related columns.

Column Header

Header identifying a column.

Column Pinning

Fixes columns while horizontally scrolling.

Column Reordering

Changes column order.

Column Resizing

Changes column width.

Combobox

Searchable/selectable input.

Command Palette

Searchable command/action interface.

Comment

User-generated response.

Comment Thread

Conversation around content.

Comparison Indicator

Compares current and reference values.

Comparison Table

Feature-by-feature comparison across plans or products.

Competency Indicator

Displays competency level.

Completion State

Finished workflow state.

Component

Reusable UI building block.

Component API

Properties/events/configuration exposed by a component.

Component Contract

Expected inputs, outputs and behaviour.

Component Library

Collection of reusable components.

Composite Component

Component composed of several components.

Composition

Combining components to create larger structures.

Compound Component

Related components designed to work together.

Confirmation Dialog

Requests confirmation before an action.

Contact Section

Section combining contact details, form and/or map.

Container

Wrapper limiting content width.

Container Component

Handles state/data/business logic.

Container Query

Styling based on container size.

Content Area

Main application content region.

Context

Information about the current user, object, task or application state.

Context Menu

Actions relevant to current context.

Context Window

Information supplied to the AI for a response.

Contextual Action

Action relevant to current selection/context.

Contextual Help

Assistance relevant to the current screen or task.

Contextual Toolbar

Toolbar appearing for a current selection/context.

Contrast

Difference between visual elements.

Control

Interactive UI element allowing the user to perform an action or change a value.

Controlled Component

Parent controls component state.

Conversation

Sequence of user/AI messages.

Conversation History

Previous conversation content.

Cookie Consent Banner

Notice requesting consent for cookies/tracking.

Currency Formatting

Locale-appropriate currency presentation.

Custom View

User-defined representation of data.

Dark Pattern

UI intentionally designed to manipulate users against their interests.

Dashboard

Collection of information widgets.

Dashboard Filter

Filter affecting dashboard content.

Dashboard Grid

Layout containing widgets.

Dashboard Layout

Arrangement of widgets.

Dashboard Template

Predefined dashboard arrangement.

Dashboard Widget

Individual dashboard component.

Data Export

Exports records/data.

Data Grid

Interactive table with advanced capabilities.

Data Label

Label attached to chart data.

Date Formatting

Locale-appropriate date presentation.

Date Input

Date entry control.

Date Picker

Visual date selector.

Date Range

Start/end date interval.

Date Range Filter

Dashboard-wide time range.

Date Range Picker

Start/end date selector.

Date/Time Picker

Combined date and time selector.

Day View

Calendar showing a day.

Dead End

View with no obvious next action/navigation.

Debounce

Delay execution until input activity settles.

Debouncing

Delay execution until activity stops.

Deep Link

URL linking directly to a specific application state.

Default

Normal resting state.

Delay

Wait before an animation begins.

Density

Amount of information/spacing in a component.

Density Selector

Changes table spacing/density.

Dependency

Relationship requiring one item to precede another.

Derived State

State calculated from other state.

Deselect

Remove selection.

Design Primitive

Fundamental visual/interaction building block.

Design System

Reusable components, patterns, rules and tokens.

Design Token

Named reusable design value.

Desktop-first

Designing from large screens downward.

Destructive Action

Action that deletes or causes irreversible change.

Destructive Action Without Confirmation

Dangerous action lacks appropriate safeguards.

Detail List

Label/value list showing object properties.

Detail View

Detailed representation of an object.

Dialog

Interface asking for information/decision.

Digest

Grouped notification summary.

Dirty

Unsaved changes exist.

Dirty State

Input has changed since loading/saving.

Disabled

Interaction unavailable.

Discoverability

How easily users can discover functionality.

Divider

Visual separation between sections.

Document Viewer

Displays documents.

Donut Chart

Pie chart with centre removed.

Double-click

Two rapid clicks.

Download Action

Downloads a file.

Draft

Unpublished saved content.

Drag

Move an object while holding pointer.

Drag-and-Drop Upload

File upload using a drop zone.

Drag-to-Reschedule

Drag event to change its time.

Draggable Widget

Widget that can be repositioned.

Dragging

Element is being dragged.

Drawer

Side panel that slides into view.

Drill-down

Move from summary to detail.

Drill-down Chart

Chart allowing navigation into detailed data.

Drill-through

Navigate from one data context to another.

Drop

Release dragged object onto a target.

Drop Target

Element is a valid drop destination.

Drop Zone

Area accepting dropped files.

Dropdown

Floating option/action list.

Dropdown Menu

Menu revealed from a trigger.

Due Date

Completion target date.

Duration

How long an animation runs.

Eager Loading

Load resources immediately.

Ease-In / Ease-Out

Easing that accelerates in / decelerates out.

Easing

Rate-of-change curve of an animation.

Element

Individual UI object or HTML element.

Elevation

Perceived distance above a surface.

Email Input

Email input.

Emoji Picker

Interface for inserting emoji.

Emphasis

Degree of visual attention.

Empty

No content/data exists.

Empty Card

Card representing missing content.

Empty State

UI displayed when no data exists.

Empty-State Onboarding

Empty state doubling as a getting-started prompt.

Encapsulation

Keeping implementation details within a component.

Enter/Exit Animation

Motion applied as elements appear or leave.

Entity Card

Generic object summary.

Entity Picker

Selects application entities.

Epic

Large body of work containing smaller items.

Error

Operation failed.

Error State

Invalid input state.

Error Without Recovery

Error state provides no useful recovery path.

Escalation

Movement to a higher level of attention/authority.

Escalation Indicator

Shows that an item requires escalation.

Escalation Queue

Items requiring escalation.

Estimate

Expected effort/duration.

Event

Scheduled item.

Event Handler

Code responding to an event.

Exception Queue

Items requiring special handling.

Exception State

Workflow state representing an exception/failure.

Excessive Nesting

Deeply nested UI making comprehension difficult.

Exit-Intent Modal

Overlay triggered when the visitor moves to leave.

Expand

Reveal hidden content.

Expandable Card

Card can reveal more information.

Expanded

Component is open.

Export Action

Generates/export data.

FAB

Floating Action Button.

FAQ Accordion

Frequently asked questions in expandable sections.

Faceted Search

Search with multiple category facets.

Fallback Language

Language used when a translation is missing.

Favicon

Small icon representing the site in browser tabs.

Feature Announcement

Highlight introducing a new capability.

Feature Card

Individual feature summary block.

Feature Grid

Grid of features, each with icon, title and description.

Feed

Continuously updated content stream.

Feedback

System response indicating what happened or what is happening.

Feedback Widget

Control for submitting user feedback.

File Card

Compact file representation.

File List

Collection of files.

File Metadata

Information about a file.

File Picker

Selects a file.

File Preview

Preview of a file.

File Upload

File selection/upload control.

Filter

Restricts records displayed.

Filter Bar

Collection of filter controls.

Filter Chip

Compact active-filter representation.

Filter Drawer

Panel containing filters.

Filtered View

Data restricted by criteria.

Find and Replace

Locating and substituting text within content.

Fixed Header

Header positioned independently of normal document flow.

Flex Container

Parent using Flexbox.

Flex Item

Child within Flexbox.

Flexbox

One-dimensional CSS layout system.

Fluid Layout

Layout scaling continuously.

Focus

Keyboard/input focus.

Focus Indicator

Visual focus representation.

Focus Management

Programmatic control of focus.

Focus Trap

Restricts focus within an active dialog.

Focus Trap Bug

Keyboard focus becomes inaccessible.

Font Family

Typeface.

Font Size

Text size.

Font Weight

Text thickness.

Footer

Bottom-level page information/navigation.

Footer Navigation

Grouped link columns within the footer.

Form

Collection of inputs used to submit information.

Form Group

Label, control and supporting information grouped together.

Form State

Current form values/validation state.

Form Validation

Process of checking input correctness.

Formatting Toolbar

Controls for applying text formatting.

Gantt Chart

Task timeline with durations/dependencies.

Gap

Space between layout items.

Gate

Condition that must be met before progression.

Gauge

Radial value indicator.

Generated Content

AI-produced content.

Ghost Button

Minimal visual button.

Global Filter

Filter affecting multiple widgets.

Global Search

Searches across the application.

Global State

State shared across the application.

Grid

Two-dimensional layout system.

Grid Container

Parent using CSS Grid.

Grid Item

Child within CSS Grid.

Grouped List

Items grouped into categories.

Hamburger Menu

Collapsed mobile navigation trigger.

Header

Top-level page/application header.

Heading Selector

Control choosing heading levels.

Heatmap

Values represented by visual intensity.

Height

Element height.

Help Beacon

Persistent button opening help options.

Help Centre Widget

Embedded access point to support content.

Helper Text

Supporting input instructions.

Hero

Prominent introductory section.

Hero Image

Primary image or visual within the hero.

Hero Section

Prominent opening section carrying the page's main message.

Hidden Actions

Important functionality hidden from users.

Hidden Input

Input not visibly rendered.

Histogram

Distribution chart.

Hotspot

Pulsing indicator inviting interaction.

Hover

Pointer over an element.

Hover Effect

Visual response to pointer hover.

Human Approval

User approval required before an action.

Human-in-the-loop

Workflow requiring human participation.

Hydration

Attaching client behaviour to server-rendered HTML.

ISR

Incremental Static Regeneration.

Icon Button

Button represented primarily by an icon.

Icon Set

Consistent family of icons used across an interface.

Identity Provider

Service providing authentication identity.

Image Gallery

Collection of images presented for browsing.

Image Slider

Carousel specifically for images.

Image Viewer

Displays images.

Image Zoom

Magnified inspection of an image on hover or click.

Import Action

Brings external data into the application.

Import Wizard

Guided data import.

In-app Notification

Notification shown inside the application.

Inconsistent Component

Same concept presented differently in different areas.

Infinite Data Grid

Loads more rows as the user scrolls.

Infinite List

Loads additional records while scrolling.

Infinite Scroll

Automatically load more content during scrolling.

Infinite Scroll Trap

Scroll experience that makes navigation difficult.

Info State

Informational state.

Information Architecture

Organisation of content, navigation and functionality.

Initial Loading

First load of a view/resource.

Inline Edit

Edit without navigating away.

Inline Editing

Editing directly within the grid.

Inline Hint

Small piece of guidance within the interface.

Inline Toolbar

Formatting controls appearing beside selected text.

Inline Validation

Validation displayed alongside the field.

Input

Generic user-editable control.

Inspector

Contextual panel for viewing/editing object properties.

Inspector Pattern

Selected object properties shown alongside content.

Interaction

User action and resulting system response.

Interactive Card

Entire card or sections are interactive.

Interactive Map

Map supporting pan, zoom and selectable markers.

Internationalisation (i18n)

Building software so it can support multiple languages/regions.

Invalid

Input fails validation.

Issue

Problem/work item requiring attention.

KPI

Key Performance Indicator.

KPI Card

Prominent metric display.

Kanban Board

Columns containing movable cards.

Kanban Column

Workflow stage.

Keyboard Navigation

Operation without a pointer.

Keyboard Shortcut

Key combination triggering an action.

Keyboard Shortcut Overlay

Reference sheet of shortcuts, often opened with ?.

Keyframes

Defined points within an animation sequence.

Knowledge Base

Searchable library of support articles.

LTR

Left-to-right text direction.

Label

Describes an input.

Landing Page

Standalone page designed around a single goal or campaign.

Language Switcher

Control for changing the interface language.

Layout Component

Controls structure/positioning.

Layout Shift

Content unexpectedly moves as the page loads.

Lazy Loading

Load content only when needed.

Lazy-Loaded Image

Image loaded only as it approaches the viewport.

Lead Capture Form

Form collecting contact details from prospects.

Legend

Explains chart symbols/colours.

Letter Spacing

Horizontal character spacing.

Lightbox

Enlarged media/content overlay.

Lightbox Gallery

Gallery whose images open enlarged in an overlay.

Line Chart

Values plotted over time/axis.

Line Height

Vertical spacing between lines.

Link

Navigational reference.

Link Editor

Interface for creating and editing hyperlinks.

List

Collection of records/items.

List Divider

Separator between items.

List Footer

Supporting list content.

List Header

List title/context.

List Item

Individual list record.

Live Region

Dynamic content announced by screen readers.

Loading

Operation in progress.

Loading Animation

Motion indicating an operation in progress.

Loading State

State representing an active operation.

Loading Without Feedback

Long operation with no indication of progress.

Local Search

Searches within the current context.

Local State

State belonging to one component/context.

Locale

Combination of language and region (e.g. en-GB).

Localisation (l10n)

Adapting content and formats for a specific language/region.

Location Map

Embedded map showing a business location.

Locked Account

Account unavailable due to security state.

Login

Authentication interface.

Logo Cloud

Grid or row of client/partner logos.

Logout

End authenticated session.

Long Press

Touch-and-hold interaction.

Lottie Animation

Vector animation played from an exported file.

MFA

Multi-factor authentication.

Main Content

Primary information/task area.

Map Embed

Third-party map rendered in the page.

Map Marker

Pin indicating a location on a map.

Margin

Space outside an element.

Markdown Editor

Editor using markdown syntax for formatting.

Marquee

Continuously scrolling horizontal content.

Masked Input

Input constrained by a format.

Masonry Grid

Gallery layout with varied item heights packed together.

Master/Detail

List/master area paired with selected-item details.

Media Embed

Third-party media rendered in the page (e.g. YouTube).

Media Query

Query based on viewport/device features.

Mega Menu

Large multi-column navigation menu.

Mention

Reference to another user.

Mention Notification

Notification caused by a mention.

Mention Picker

User selection when typing a mention.

Message Bubble

Individual conversation message.

Message Composer

Interface for composing a message.

Metric

Numerical measurement.

Metric Card

Card showing a measurement.

Micro-animation

Small animation providing feedback on an interaction.

Microinteraction

Small interaction providing feedback or accomplishing a focused task.

Milestone

Significant project checkpoint.

Min/Max Width

Constraints on element width.

Mobile Card

Card representation of desktop records.

Mobile Drawer

Sliding navigation panel.

Mobile-first

Designing from small screens upward.

Modal

Blocking overlay requiring interaction.

Modal Overuse

Excessive use of blocking dialogs.

Modal Wizard

Multi-step workflow contained in a modal.

Month View

Calendar showing a month.

More Actions

Opens additional actions.

Multi-row Selection

Selecting multiple records.

Multi-select

Select multiple values.

Mystery Meat Navigation

Navigation where purpose is unclear until interacted with.

NPS Prompt

Survey asking likelihood of recommending the product.

Navbar

Primary navigation.

Navigation Menu

Collection of navigation options.

Navigation Rail

Compact vertical navigation.

Nested List

Hierarchical list.

Nested Row

Child row displayed under a parent.

Network Graph

Nodes and relationships.

Newsletter Signup

Email capture form for a mailing list.

Notification

Message about an event/state.

Notification Badge

Count of unread notifications.

Notification Centre

Central notification interface.

Notification Drawer

Panel containing notifications.

Notification Preferences

Controls notification behaviour.

Notification Toast

Temporary notification.

Number Formatting

Locale-appropriate number presentation.

Number Input

Numeric input.

OTP

One-time password.

OTP Input

One-time-password input.

Object Picker

Selects an object/resource.

Offline

Required network service unavailable.

Offline State

Application cannot currently reach required services.

Onboarding

Initial user setup journey.

Onboarding Checklist

Task list guiding initial setup.

Opacity

Transparency.

Open Graph Image

Preview image shown when a link is shared.

Opening Hours

Display of business operating times.

Optimistic State

State updated before server confirmation.

Optimistic UI

UI updates before server confirmation.

Org Chart

Visual organisation hierarchy.

Organisation

Organisational boundary.

Organisation Picker

Selects organisations.

Organisation Switcher

Switches organisational context.

Organisation Tree

Hierarchical organisational structure.

Overflow

Controls overflowing content.

Overflow Menu

Secondary actions hidden behind a menu.

Overlay

Layer above existing content.

Overloaded Dashboard

Excessive information presented simultaneously.

Owner

Accountable person/team.

Ownership Selector

Assigns ownership.

PDF Viewer

Displays PDF documents.

PIN Input

Numeric PIN entry.

Padding

Space inside an element.

Page

A complete web application route/view.

Page Component

Represents an application page.

Page Transition

Animated change between pages/views.

Pagination

Navigation through pages of results.

Panel

Bounded area containing related information.

Parallax

Layers scrolling at different speeds for depth.

Parent Component

Component containing another component.

Partial Loading

Some content loaded while other content remains pending.

Passkey

Passwordless authentication credential.

Password Input

Obscured text input.

Password Reset

Password recovery workflow.

Pattern

Reusable solution to a recurring interaction or layout problem.

Pending

Operation has started but not completed.

Pending State

Operation awaiting completion.

Permission

Specific allowed action/access.

Permission Matrix

Grid mapping roles to permissions.

Permission Prompt

Request for user permission.

Permission Selector

Assigns permissions.

Persisted State

State stored across sessions.

Pessimistic UI

UI waits for server confirmation before updating.

Picture-in-Picture

Floating mini video player.

Pie Chart

Circular proportion chart.

Pill

Rounded compact label/control.

Pinch

Multi-touch scaling gesture.

Placeholder

Example text shown before input.

Placeholder Blur

Low-quality blurred preview shown while an image loads.

Playlist

Ordered queue of media items.

Pluralisation

Grammatical handling of quantities across languages.

Poor Empty State

Empty interface without useful guidance.

Popover

Contextual floating panel.

Portfolio

Collection of projects.

Portfolio Grid

Grid showcasing previous work.

Position: Absolute

Positions relative to containing block.

Position: Fixed

Positions relative to viewport.

Position: Relative

Establishes positioning context.

Position: Sticky

Sticks relative to scroll container.

Poster Frame

Still image shown before video playback begins.

Prefetching

Load anticipated content in advance.

Preloading

Load important resources early.

Presence

Availability indicator.

Presence Indicator

Shows online/availability status.

Presentational Component

Primarily responsible for rendering.

Preview Mode

Displays content as it will appear when published.

Pricing Table

Side-by-side presentation of pricing tiers.

Pricing Tier

Individual plan within a pricing table.

Primary Button

Most important action.

Primitive

Very low-level reusable UI building block.

Priority

Relative importance.

Pristine State

Input has not been changed.

Product Tour

Guided sequence introducing an interface.

Profile

User/person information.

Profile Card

Person/profile summary.

Profile View

Detailed person/account representation.

Programme

Related projects managed together.

Progress Bar

Linear progress indicator.

Progress Checklist

Checklist showing completion of setup steps.

Progress Indicator

Indicates progress.

Progress Ring

Circular progress indicator.

Progress State

Current progression through a workflow.

Progressive Disclosure

Reveal complexity only when needed.

Progressive Onboarding

Introduces functionality gradually.

Progressive Rendering

Display content as it becomes available.

Project

Container for related work.

Project Card

Project summary.

Prompt

Instruction/request supplied to AI.

Prompt Chip

Compact selectable prompt.

Prompt History

Previous prompts.

Prompt Input

Input used to provide instructions.

Prompt Suggestion

Suggested prompt/action.

Property Panel

Panel containing object attributes/settings.

Props

Data/configuration passed to a component.

Pull-to-Refresh

Gesture to refresh content.

Pulse

Rhythmic scaling/opacity drawing attention.

Push Notification

OS/browser-level notification.

Query Builder

UI for constructing complex queries.

Quick Action

Frequently used contextual action.

Quick Create

Create an object without leaving context.

Quick Edit

Lightweight editing interaction.

Quote Request Form

Form requesting a price or estimate.

RBAC

Role-Based Access Control.

RTL

Right-to-left text direction (e.g. Arabic, Hebrew).

Radar Chart

Multi-axis radial comparison.

Radio Button

One choice from a group.

Radio Group

Group of mutually exclusive choices.

Radius

Corner rounding.

Radius Token

Named corner-radius value.

Range Selection

Selecting a range of cells/rows.

Range Slider

Selects a minimum and maximum.

Reaction

Emoji/quick response.

Read Receipt

Indicates message has been read.

Readonly

Visible but not editable.

Reauthentication

Request to authenticate again.

Recent Searches

Previously used searches.

Recurring Event

Repeating event.

Redo

Reapplies a reversed operation.

Reduced Motion

Preference for minimal animation.

Reference Line

Target/threshold line on a chart.

Refreshing

Existing data is being refreshed.

Region Selector

Control for choosing a country/region.

Registration

Account creation.

Related Posts

Suggested further articles.

Required Indicator

Shows a required field.

Reset

Resets values.

Resizable Widget

Widget whose dimensions can change.

Resize-to-Change-Duration

Resize event to change duration.

Resource Calendar

Calendar organised around resources/people.

Responsive Embed

Embed that scales with its container.

Responsive Image

Image served at sizes appropriate to the device.

Responsive Layout

Layout adapting to available space.

Responsive Table

Table adapted to narrow screens.

Retry

Reattempt failed operation.

Retry State

UI offering another attempt.

Reusability

Ability to use a component in multiple contexts.

Review Embed

Third-party reviews rendered on the site (e.g. Google reviews).

Rhythm

Repetition/consistency of spacing.

Rich Text Editor

Editor producing formatted text.

Right-click

Context-menu activation.

Role

Named collection of permissions.

Role Selector

Assigns role.

Rollback

Return to a previous state/configuration.

Route

Addressable application location.

Route Guard

Logic controlling access to a route.

Route Segment

Individual portion of a route.

Row

Horizontal grouping.

Row Actions

Actions attached to a row.

Row Editing

Editing an entire row.

Row Expansion

Expands a row to show additional information.

Row Grouping

Groups records by a value.

Row Header

Header identifying a row.

Row Selection

Selecting one or more rows.

SLA

Service-level agreement.

SLA Indicator

Shows progress against a service-level target.

SLA Timer

Visual countdown/elapsed SLA indicator.

SSG

Static Site Generation.

SSO

Single Sign-On.

SSR

Server-Side Rendering.

Safe Area

Screen area avoiding device notches/system UI.

Sample Data

Placeholder content demonstrating the product.

Save

Persists changes.

Saved Dashboard

Persisted dashboard configuration.

Saved Filter

Persisted filter configuration.

Saved Search

Persisted query.

Saved View

Persisted combination of filters/sort/columns.

Scatter Plot

Individual data points showing relationships.

Schedule

Time-based activity display.

Screen

A complete application view, especially in mobile/software terminology.

Screen Reader

Software reading interface content aloud.

Screen Reader Only

Content visually hidden but available to assistive technology.

Scroll

Move through overflowing content.

Scroll Reveal

Content animating in as it enters the viewport.

Scroll Snapping

Scrolling that settles at defined points.

Scroll-Triggered Animation

Animation started by scroll position.

Search Bar

Primary search input.

Search Input

Search-specific input.

Search Results

Results matching a query.

Search Scope

Defines where search is performed.

Search Suggestion

Suggested query/value.

Search Token

Structured portion of a query.

Secondary Button

Supporting action.

Section

Distinct logical area within a page.

Security Warning

Security-related warning message.

Segmented Control

Compact mutually exclusive options.

Select

Dropdown selection control.

Selectable Card

Card can be selected.

Selectable List

List with selection capability.

Selected

User has selected the element.

Semantic HTML

HTML conveying meaning through element choice.

Semantic Token

Token whose name describes its purpose.

Server State

Data originating from a backend/API.

Server-side Filtering

Filtering performed by the backend.

Server-side Pagination

Pagination performed by the backend.

Server-side Sorting

Sorting performed by the backend.

Session

Authenticated user session.

Session State

State valid for a session.

Session Timeout

Automatic session expiry.

Shadow

Visual depth effect.

Shadow Token

Named elevation/shadow value.

Share Control

Shares an object/content.

Side Sheet

Side-mounted temporary panel.

Sidebar

Vertical navigation or contextual panel.

Sidebar Navigation

Navigation presented vertically.

Size

Component scale variant.

Skeleton

Placeholder representing loading content.

Skeleton Loading

Content-shaped placeholder.

Skeleton Screen

Loading placeholder shaped like final content.

Skeleton Shimmer

Moving highlight across loading placeholders.

Skill Badge

Displays a skill.

Skills Matrix

People versus skills/competencies matrix.

Skip Link

Allows navigation past repeated content.

Slash Command

Typing / to insert blocks or trigger actions.

Slider

Selects a value along a range.

Snackbar

Temporary message often containing an action.

Social Links

Icon links to social media profiles.

Social Proof

Evidence others use and trust the product/service.

Sort

Changes record ordering.

Sort Control

Changes ordering.

Sort Direction

Ascending or descending order.

Sortable List

List supporting reordering.

Source Panel

Displays supporting sources.

Spacer

Intentional empty space used for layout.

Spacing Token

Named spacing value.

Sparkline

Small inline trend chart.

Spinner

Indeterminate loading indicator.

Split Button

Primary action plus dropdown actions.

Split Pane

Resizable two-panel layout.

Split Preview

Editor and preview shown side by side.

Split View

Multiple related views displayed simultaneously.

Spotlight

Dimmed interface highlighting one element.

Spring Animation

Physics-based motion with natural overshoot.

Sprint

Time-boxed work period.

Stack

Consistent vertical/horizontal arrangement.

Stagger

Sequential offsetting of animations across items.

Stale

Data may be outdated.

Stale State

Displayed data may no longer be current.

Star Rating

Rating displayed as filled/unfilled stars.

Stat Card

Compact metric display.

State

Current workflow condition.

State Machine

Formal model of states and transitions.

Status

Current lifecycle state.

Status Badge

Label representing state.

Stepper

Sequential navigation through stages.

Sticky CTA

Call-to-action that remains visible while scrolling.

Sticky Header

Header remaining visible while scrolling.

Sticky Scroll Effect

Element pinning in place during part of the scroll.

Story

User-focused work requirement.

Streaming

Content delivered incrementally.

Streaming Response

AI response displayed incrementally.

String Catalogue

Store of translatable interface text.

Submit

Submits a form/action.

Subtask

Task belonging to another task.

Success

Operation succeeded.

Success State

Valid input state.

Summary Card

Overview of an entity or dataset.

Surface

Visual layer containing content or controls.

Survey Prompt

In-app request to answer questions.

Swimlane

Horizontal grouping on a Kanban board.

Swipe

Horizontal/vertical gesture.

Switch

Binary on/off control.

System Notification

Application/system event.

Tab

Individual view/navigation control.

Tab Bar

Navigation between related views.

Table

Rows and columns of structured data.

Tag

Classification label.

Tag Editor

Adds/removes tags.

Tagline

Short memorable phrase summarising the offer or brand.

Target Indicator

Shows performance against a target.

Task

Work item requiring completion.

Task Card

Task summary.

Task Queue

Collection of tasks awaiting processing.

Team List

List of teams.

Team Picker

Selects teams.

Team Section

Grid of team member profiles.

Telephone Input

Telephone-number input.

Template

Reusable page/layout structure.

Tenant

Isolated customer/application context.

Tenant Switcher

Switches tenant/customer context.

Tertiary Button

Low-emphasis action.

Testimonial

Quoted customer endorsement.

Testimonial Carousel

Rotating display of testimonials.

Text Button

Button represented primarily by text.

Text Input

Single-line text control.

Textarea

Multi-line text control.

Theme Variant

Alternative theme such as light/dark.

Theming

Applying a visual configuration across a system.

Throttle

Limit execution frequency.

Throttling

Limit execution frequency.

Thumbnail

Small preview version of an image or video.

Thumbnail Strip

Row of thumbnails used to navigate media.

Tile

Prominent compact card-like UI block.

Time Input

Time entry control.

Time Picker

Visual time selector.

Time Slot

Available time interval.

Timeline

Chronological event display.

Timeline View

Time-oriented visual schedule.

Timeout

Operation exceeded allowed time.

Timezone Selector

Control for choosing a timezone.

Tiny Touch Target

Interactive control too small for reliable touch use.

Toast

Temporary notification.

Toggle

Generic binary/selected-state control.

Toggle Button

Button representing an on/off or selected state.

Token Input

Allows multiple selected values represented as tokens.

Tool Invocation

AI calling an external/system tool.

Tool Status

Status of an AI tool operation.

Tooltip

Small explanatory overlay.

Topbar

Horizontal application toolbar.

Touch Target

Interactive area sized for touch.

Touched State

User has interacted with an input.

Tour Step

Individual stage within a product tour.

Transition

Movement from one state to another.

Translation

Content rendered in another language.

Tree Node

Individual tree item.

Tree Select

Selects from hierarchical data.

Tree Shaking

Remove unused code from production bundles.

Tree View

Hierarchical expandable list.

Treemap

Nested rectangles representing hierarchical data.

Trend Indicator

Shows direction of change.

Trust Badge

Icon signalling security, accreditation or guarantee.

Typing Indicator

Shows that another user is typing.

Typography

System governing text presentation.

Typography Token

Named typography value.

UI

User Interface; the visual and interactive part of an application.

URL Input

URL input.

URL State

State represented in the URL.

UX

User Experience; how users experience and accomplish tasks within a product.

Uncontrolled Component

Component manages its own state.

Undo

Reverses a previous operation.

Undo History

Sequence of reversible editing operations.

Unread Indicator

Shows unread content.

User Picker

Selects users.

Valid

Input passes validation.

Validation Message

Explains validation result.

Value Proposition

Statement of the benefit the product/service provides.

Variant

Alternative component configuration.

Velocity

Rate at which work is completed.

Version History

Previous file versions.

Version Selector

Selects a file version.

Video Controls

Play/pause, seek, volume and fullscreen controls.

Video Player

Component for video playback.

View

A particular representation of application information.

View Transition

Browser-native animated navigation between views.

Viewport

Visible browser area.

Virtual List

Efficiently rendered large list.

Virtualisation

Renders only visible records for performance.

Visual Hierarchy

Arrangement of visual emphasis that communicates importance.

Visual Weight

Perceived prominence of an element.

WCAG

Web Content Accessibility Guidelines.

WIP Limit

Work-in-progress limit.

WYSIWYG Editor

Editor whose display matches the published output.

Walkthrough

Step-by-step guidance through a task.

Warning

Potential problem exists.

Warning State

UI indicating potential danger.

Waveform

Visual representation of audio amplitude.

Week View

Calendar showing a week.

Welcome Screen

Introductory view for new users.

What's New Panel

In-app announcement of recent changes.

Whitespace

Deliberate empty space.

Widget

Self-contained information/function block.

Widget Body

Main widget content.

Widget Configuration

Settings controlling widget behaviour.

Widget Filter

Filter affecting one widget.

Widget Footer

Optional supporting information/actions.

Widget Header

Header containing title/context/actions.

Widget Menu

Widget-specific actions/configuration.

Width

Element width.

Wizard

Multi-step guided workflow.

Word Count

Live count of words entered.

Work Item

Generic unit of work.

Work Queue

Items requiring action.

Workflow

Defined sequence of states/actions.

Workflow Stage

Major workflow phase.

Workflow Step

Individual step in a process.

Workload Indicator