Displays per-hour status indicators on a status page, providing real-time and historical system health. Supports various UI states and interactive elements like tooltips for detailed information.

A fixed bottom-right chat bubble, commonly used for customer support or feedback. It expands into a side panel, features a notification badge for new messages, and includes a text input for user interaction, often with a scrollable conversation history. Notable behavior: Expand/Collapse; Typing; Expanded.

Facilitates file uploads with drag-and-drop or click interactions, providing background loading, progress indicators, and visual feedback. Manages empty, loading, and completion states for user awareness.

Displays timely news or updates within an application, often indicated by a notification badge. Users can typically view details in a tooltip or dedicated panel, which may support infinite scrolling for more content and include hypertext links. Notable behavior: Infinite Scroll; Hypertext Links; Unread Indicator.

A Skeleton Loader displays a simplified, placeholder version of content while actual data is being fetched. This pattern enhances perceived performance and reduces user frustration by providing immediate visual feedback and indicating the layout of incoming information. Notable behavior: Loading; Pending content; Content structure placeholder.

Displays a progress bar to indicate the loading status of content or an operation, providing visual feedback to the user during wait times and enhancing awareness of background processes.

Enables users to assign colors to tags by dragging and dropping color markers onto designated slots, facilitating categorization and visual organization.

Displays a visual spinner to indicate that a module or content is actively loading, preventing user uncertainty and improving perceived performance during asynchronous operations.

A vertical navigation menu composed of icons, often placed in a side panel or navbar, supporting tooltips on hover and notification badges for user awareness and pathfinding.

A background animation that provides visual feedback, often responding to user interactions like drag & drop gestures or indicating loading states, enhancing user awareness and engagement.

A Progressive Layout Loader displays content incrementally, often utilizing placeholders or animations, to enhance perceived performance and user experience during data fetching or complex rendering operations.

Desktop, Decision Making, Apple OS, macOS, Español, Alert Dialog, Progress State, Close Overlay, Hover Event, Image / Illustration, Apple

Desktop, Decision Making, Awareness, Web, English, Animation, Loader, Hypertext Links

This pattern describes the visual and functional aspects of a video loader within a web application, typically used on desktop to indicate that video content is being prepared or buffered for playback.

This pattern highlights new or upcoming features within a dropdown menu using a notification badge to increase user awareness. It provides a clear visual cue for users to discover new functionalities. Notable behavior: Menu item selection; Menu open/close; New feature indicator.

Desktop, Awareness, Web, English, Side Panel, Fixed on Scroll, Error State, Progress State, Google, Google Suite

This pattern describes how to divide a desktop or browser window into multiple, independently manageable sections, often allowing users to resize or rearrange them. It enhances multitasking by presenting related content side-by-side.

A UI element, typically a bar, that visually indicates the user's reading progress or status within a document or page. Often integrated into a fixed navigation bar, it enhances awareness and helps users track their position. Notable behavior: Progress State; Fixed on Scroll.

Facilitates sharing an invitation link to a live movie event, enabling users to invite others and manage the invitation process. Notable behavior: Hypertext Links; Copy to Clipboard; Live State.

Provides a concise visual indicator, often bubble-shaped, to communicate the current status of an item or process. It enhances user awareness, particularly within dynamic content flows like infinite scroll or pagination, by highlighting progress or empty states, potentially with animation and fixed positioning. Notable behavior: Animation; Progress State; Empty State.

Displays a notification badge on the topbar (navbar) to alert users of new rewards. Clicking the badge reveals a dropdown menu with reward details, enhancing user awareness and appreciation for earned benefits. Notable behavior: Click to open dropdown; Hover to reveal details (optional); Unread notification (badge visible).

An actionable empty state provides guidance and a clear call to action when a section or application has no content. It helps users understand how to get started, add data, or resolve the empty condition, often appearing during onboarding or initial use.

Provides a sophisticated interface for selecting colors, incorporating multiple input methods such as tabs, dropdowns, numeric fields, and range sliders. It supports drag-and-drop gestures for color manipulation and includes visual cues like color markers and progress states to enhance user experience.

A banner displayed at the top of a form to communicate general validation errors or system-level issues to the user. It provides immediate awareness of problems that prevent form submission, typically appearing after an attempted submission. Notable behavior: Form Submission; Dismissal; Visible.

Provides functionality for users to share content directly to various social media platforms, commonly implemented on web and desktop applications. Notable behavior: Sharing; Fixed on Scroll.