-
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.
Core -
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.
Core -
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.
Core -
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.
Core -
Banner
Persistent page-level message.
Core -
Bar Chart
Values represented by bars.
Core -
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.
Core -
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.
Core -
Button Group
Related buttons grouped together.
Core -
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.
Core -
Card Body
Main card content.
-
Card Footer
Supporting actions/content.
-
Card Header
Card title/context area.
-
Carousel
Rotating sequence of content panels.
Core -
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.
Core -
Checked
Checkbox/radio is selected.
-
Child Component
Component nested inside another.
-
Chip
Compact interactive or informational label.
Core -
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.
Core -
Command Palette
Searchable command/action interface.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
Data Label
Label attached to chart data.
-
Date Formatting
Locale-appropriate date presentation.
-
Date Input
Date entry control.
-
Date Picker
Visual date selector.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
Icon Set
Consistent family of icons used across an interface.
-
Identity Provider
Service providing authentication identity.
-
Image Gallery
Collection of images presented for browsing.
Core -
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.
Core -
Kanban Board
Columns containing movable cards.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
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.
Core -
Sidebar Navigation
Navigation presented vertically.
-
Size
Component scale variant.
-
Skeleton
Placeholder representing loading content.
Core -
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.
Core -
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.
Core -
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.
Core -
System Notification
Application/system event.
-
Tab
Individual view/navigation control.
-
Tab Bar
Navigation between related views.
Core -
Table
Rows and columns of structured data.
Core -
Tag
Classification label.
Core -
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.
Core -
Testimonial Carousel
Rotating display of testimonials.
-
Text Button
Button represented primarily by text.
-
Text Input
Single-line text control.
Core -
Textarea
Multi-line text control.
Core -
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.
Core -
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.
Core -
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.
Core -
Topbar
Horizontal application toolbar.
Core -
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.
Core -
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.
Core -
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
Shows current workload.
-
Workspace
Persistent application environment containing tools/content.
-
Workspace Switcher
Switches between workspaces.
-
Wrapper
Generic grouping/layout container.
-
Z-index
Controls stacking order.
-
a
Hyperlink/navigation element.
-
article
Self-contained piece of content.
-
aside
Complementary content.
-
body
Contains visible document content.
-
button
Interactive action control.
-
details
Native expandable disclosure component.
-
dialog
Native dialog element.
-
div
Generic block-level container.
-
fieldset
Groups related form controls.
-
figcaption
Caption associated with a figure.
-
figure
Self-contained media/content with optional caption.
-
footer
Footer for a page or section.
-
form
Form containing user input controls.
-
h1–h6
Semantic heading hierarchy.
-
head
Contains document metadata and resources.
-
header
Introductory/header content for a page or section.
-
html
Root HTML document element.
-
input
User input control.
-
label
Accessible label for a form control.
-
legend
Caption for a fieldset.
-
li
List item.
-
main
Primary content of the document.
-
nav
Navigation region.
-
ol
Ordered list.
-
output
Represents calculated/output information.
-
p
Paragraph.
-
section
Thematic section of content.
-
select
Native selection control.
-
span
Generic inline container.
-
summary
Visible heading/control for a details element.
-
textarea
Multi-line text input.
-
ul
Unordered list.