Status Bars & Chips | Components

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)

Desktop (24)
Tablet (0)
Mobile (4)

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

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

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

386. Skeleton Loader

Desktop, Awareness, Onboarding, Web, English, Loader, Thumbnail

361. WhatsApp - Progress Bar Loading

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

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

Desktop, Awareness, Pathfinding, Web, English, Loader, Twitter

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

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

251. Progressive Layout Loader

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

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

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

189. Feature Preview on Menu

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

43. File Upload Status

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

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

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

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

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

83. Rewards Notification on Topbar

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

66. Actionable Empty State

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

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

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

112. Share on Social Networks

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