Home
Flows
Components
Changelog
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with 💙 by Pablo Armenv2.1.12

Home
/Components
/Status Bars & Chips

Patterns for Status Bars & Chips

Status Bars & Chips are visual UI elements used to communicate system states, progress, or metadata; Bars provide linear feedback on task completion, while Chips offer compact, often interactive labels for categorization or real-time status updates.
 
Recommendation (Ad)
https://uink.digital
 
  • Desktop (26)
  • Tablet (0)
  • Mobile (4)
406. Fixed Bottom-Right Chat Bubble

406. Fixed Bottom-Right Chat Bubble

Desktop | Feedback | Pathfinding | Onboarding | Web | English | Chat | Side Panel | Accordion | Fixed on Scroll | Notification Badge | Progress State | Live State | Transition | Scrollbar | Text Input

403. File Upload and Background Loader

403. File Upload and Background Loader

Desktop | Awareness | Feedback | Onboarding | Web | English | User Selection | Drag & Drop Gesture | Loader | Animation | Image / Illustration | Empty State | Progress State | Button | File OS | Click Event

401. In-App News Notification

401. In-App News Notification

Desktop | Awareness | Notification Badge | Tooltip | Infinite Scroll | Hypertext Links

386. Skeleton Loader

386. Skeleton Loader

Desktop | Awareness | Onboarding | Web | English | Loader | Thumbnail

361. WhatsApp - Progress Bar Loading

361. WhatsApp - Progress Bar Loading

Desktop | Awareness | Pathfinding | Onboarding | Web | Español | Loader | Hypertext Links

325. Drag & Drop Tag Colors to Slots

325. Drag & Drop Tag Colors to Slots

Desktop | Decision Making | Awareness | Accessibility | Apple OS | English | Drag & Drop Gesture | Color Marker | Checkbox | Tags

308. Spinners for Module Loading

308. Spinners for Module Loading

Desktop | Awareness | Pathfinding | Web | English | Loader | Twitter

295. “NEW” Badge on Menu Items

295. “NEW” Badge on Menu Items

Desktop | Mobile | Awareness | Decision Making | Pathfinding | Web | English | Navbar | Notification Badge | Hypertext Links | Notion

292. Vertical Icon Menu

292. Vertical Icon Menu

Desktop | Awareness | Pathfinding | Web | English | Tooltip | Side Panel | Navbar | Hover Event | Image / Illustration | Notification Badge | Dashboard | Mailchimp

274. Interactive Background Animation

274. Interactive Background Animation

Desktop | Pathfinding | Awareness | Web | English | Animation | Loader | Drag & Drop Gesture | GitHub

251. Progressive Layout Loader

251. Progressive Layout Loader

Desktop | Pathfinding | Awareness | Web | English | Tooltip | Loader | Animation | Google | Google Analytics

223. Stop Operation Progress

223. Stop Operation Progress

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

No preview

212. Automatic Background Animation (on Load)

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

45. Webapp Video Loader

45. Webapp Video Loader

Desktop | Awareness | Web | English | Español | Loader

189. Feature Preview on Menu

189. Feature Preview on Menu

Desktop | Awareness | Accessibility | Web | English | Dropdown Menu | Notification Badge

43. File Upload Status

43. File Upload Status

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

42. Browser Status Banner for Pages

42. Browser Status Banner for Pages

Desktop | 📱 Mobile | Awareness | Apple OS | Español | Banner | Hypertext Links | Empty State | Error State | Apple Safari

150. Split OS Screens

150. Split OS Screens

Desktop | Accessibility | Web | English | Drag & Drop Gesture | Long Click Event | Browser Window | Navbar | Side Panel | Active State | Live State

158. Bar Reading Status

158. Bar Reading Status

Desktop | Awareness | Pathfinding | Web | English | Progress State | Notification Badge | Navbar | Fixed on Scroll | McKinsey

173. Share Invitation to Live Movie

173. Share Invitation to Live Movie

Desktop | Pathfinding | Onboarding | Awareness | Web | Apple OS | Español | Hypertext Links | Navbar | Live State | Empty State | Copy to Clipboard | Avatar | Thumbnail | Invitation Link | Disney

91. Bubble Status Reading

91. Bubble Status Reading

Desktop | Pathfinding | Awareness | Appreciation | Web | English | Infinite Scroll | Pagination | Animation | Fixed on Scroll | Progress State | Empty State | TechCrunch

83. Rewards Notification on Topbar

83. Rewards Notification on Topbar

Desktop | Awareness | Appreciation | Web | English | Notification Badge | Dropdown Menu | Navbar

66. Actionable Empty State

66. Actionable Empty State

Desktop | Onboarding | Awareness | Web | English | Loader | Empty State | Google | Google Suite

21. Advanced Color Picking

21. Advanced Color Picking

Desktop | Accessibility | Apple OS | macOS | Español | Tabs | Color Marker | Progress State | Dropdown Menu | Numeric Input | Range Field | Drag & Drop Gesture | User Selection

29. General Form Errors Banner

29. General Form Errors Banner

Desktop | Awareness | Web | English | Text Input | Banner | Notification Badge | Mailchimp

112. Share on Social Networks

112. Share on Social Networks

Desktop | Pathfinding | Web | English | Banner | Fixed on Scroll | Tags | Share on Social