Web UI Playbook

The documented web interfaces patterns

Essential patterns for crafting scalable and accessible web interfaces.

Alerts
In Progress
Prominent messages that communicate important information
Successfully saved!
Your changes have been saved.
Action required
Please review your settings.
Error occurred
Failed to process request.
Avatar
In Progress
Visual representations of users or entities
User Profiles
SC
JD
AK
System & Entities
A
Team Collaboration
AJ
BS
CD
AJ
BS
+3
Badge
In Progress
Small labels that indicate status, attributes, or category
Status Badges
CompletePending
Alert Badges
ErrorWarning
Feature Badges
NewFeatured
Buttons
In Progress
Clickable elements that trigger actions and navigation
Primary Actions
Secondary Actions
Destructive Action
Card
In Progress
Flexible containers that organize and display related content
ArticleNew

UI Design Patterns

5 min read

Checkbox
In Progress
Controls for selecting multiple options from a list
Enable notifications
Marketing emails
Select all items
Combobox
In Progress
Searchable dropdowns that combine input fields with option lists
Search countries...
ReactTypeScript
Add more skills...
🇺🇸United States
Menu
In Progress
Organized lists of actions, options, and navigation items
Context Actions
Application Menu
Selection Menu
Modal
In Progress
Overlay windows that focus attention on specific tasks
Information Modal
ℹ️ Details
Confirmation Dialog
Cancel
Confirm
Destructive Action
Cancel
Delete
Progress Indicators
In Progress
Visual feedback showing the completion status of processes
Upload Progress0%
Loading Data
System Status
65%
Radio Button
In Progress
Controls for selecting one option from multiple choices
💳 Credit Card
🅿️ PayPal
🍎 Apple Pay
Slider
In Progress
Interactive controls for selecting values within a range
Brightness75%
Range$50 - $250
Switch
In Progress
Toggle controls for binary on/off states
Push notifications
Email alerts
Auto-sync data
Tabs
In Progress
Navigation that organizes content into switchable sections
Overview
Analytics
Settings
Dashboard Overview
Key metrics and insights for your project
Text Input
In Progress
Fields for entering and editing single-line text
user@example.com
Search components...
••••••••
Tooltips
Complete
Contextual hints that appear on hover or focus
Get help and support
Additional information