ebUIPlaybook

The documented web interfaces patterns

Essential patterns for building scalable and accessible web interfaces.

Contextual feedback messages with proper semantics

Successfully saved!

Your changes have been saved.

Action required

Please review your settings.

Failed to process request.

Visual representations of users, entities, or objects with status indicators and grouping

System & Entities

Team Collaboration

Visual indicators that communicate status, category, or attributes of objects and elements

CompletePending

Interactive elements that enable users to trigger actions and navigate interfaces

Primary Actions

Secondary Actions

Destructive Action

Multi-selection controls for forms and interactive lists

Enable notifications

Marketing emails

Select all items

Searchable dropdown inputs that combine text fields with option lists for efficient data entry

Search countries...

ReactTypeScript

Add more skills...

🇺🇸United States

Organized collections of commands, options, and navigation links accessed on demand

Context Actions

Application Menu

Focused overlays for critical actions, forms, and confirmations

Information Modal

Confirmation Dialog

Destructive Action

Progress Indicators

Visual feedback components that communicate the progress of system processes and user flows

Upload Progress0%

Single-selection controls for mutually exclusive choices in forms and settings

💳 Credit Card

Interactive range controls for selecting values within defined boundaries

Range$50 - $250

Binary toggle controls for instant state changes and settings

Push notifications

Organize related content into sections with easy navigation

Dashboard Overview

Key metrics and insights for your project

Single-line text entry fields with validation, icons, and accessibility features

user@example.com

Search components...

••••••••

Contextual information that appears on hover or focus

Get help and support

Additional information