Web UI Playbook

The Documented Web Interface Patterns

A curated, essential set of UI patterns for crafting scalable and accessible web interfaces

Prominent messages that communicate important information

Successfully saved!

Your changes have been saved.

Action required

Please review your settings.

Failed to process request.

Visual representations of users or entities

System & Entities

Team Collaboration

Small labels that indicate status, attributes, or category

CompletePending

Clickable elements that trigger actions and navigation

Primary Actions

Secondary Actions

Destructive Action

Flexible containers that organize and display related content

UI Design Patterns

5 min read

Controls for selecting multiple options from a list

Enable notifications

Marketing emails

Select all items

Searchable dropdowns that combine input fields with option lists

Search countries...

ReactTypeScript

Add more skills...

🇺🇸United States

Organized lists of actions, options, and navigation items

Context Actions

Application Menu

Overlay windows that focus attention on specific tasks

Information Modal

Confirmation Dialog

Destructive Action

Progress Indicators

Visual feedback showing the completion status of processes

Upload Progress0%

Controls for selecting one option from multiple choices

💳 Credit Card

Interactive controls for selecting values within a range

Range$50 - $250

Toggle controls for binary on/off states

Push notifications

Navigation that organizes content into switchable sections

Dashboard Overview

Key metrics and insights for your project

Fields for entering and editing single-line text

user@example.com

Search components...

••••••••

Contextual hints that appear on hover or focus

Get help and support

Additional information