--- title: "Status indicator UI: anatomy, variants and examples | Kombai" description: "A status indicator is a small dot, icon or pill that shows the state of an item, like online, unread, live or done." canonical_url: https://kombai.com/glossary/status-indicator/ author: "The Kombai Team" --- # Status indicator A status indicator is a small dot, icon or pill that shows the state of an item, like online, unread, live or done. - Also called: status dot, badge - Platforms: Web, Mobile - In the Kombai gallery: [55 web designs](https://kombai.com/gallery/web/status-icon/), [35 mobile designs](https://kombai.com/gallery/mobile/status-icon/) - [Kirkwall](https://kombai.com/gallery/inspirations/status-icon-web-11/) (Web) - [Draymont](https://kombai.com/gallery/inspirations/status-icon-web-45/) (Web) - [Thistledown](https://kombai.com/gallery/inspirations/status-icon-ios-6/) (Mobile) ## What is a status indicator? A status indicator attaches a state to something people are already looking at: a person, a task, an order, a channel. It is usually a colored dot, a small icon or a short pill, placed beside or on top of the item. Color makes it quick to scan, and a label, icon shape or tooltip makes it readable without color. - Small and attached to an item, never a message of its own. - Uses a fixed set of states, each with its own color and shape or label. ## When to use status indicator - **Presence.** Whether a person is online, away or offline, right on their avatar. - **Workflow state.** Where a task, order or ticket sits, from to do through to done. - **Something new.** An unread message or a fresh upload that people have not seen yet. ## When not to use one - **Counts.** For a number, like 12 unread, use a badge. - **Events.** When something just happened and people should know now, use a toast. - **Long explanations.** If the state needs a sentence, write it in the row or show a message. ## Anatomy 1. **Item**: The thing that has a state 2. **Dot**: Color and shape per state 3. **Ring**: Keeps the dot clear of photos 4. **Label**: The state in words 5. **States**: Online, away, busy, offline ## Variants We sorted the status indicator designs in the Kombai gallery and found four patterns. ### 1. Presence dots on avatars A dot on the corner of an avatar: green for online, gray or hollow for offline, sometimes with a last-seen time. - [Foxglove](https://kombai.com/gallery/inspirations/status-icon-ios-14/) (Mobile) - [Halloway](https://kombai.com/gallery/inspirations/status-icon-ios-29/) (Mobile) - [Ivorcross](https://kombai.com/gallery/inspirations/status-icon-web-50/) (Web) ### 2. Unread dots A single bright dot at the end of a row that disappears once the item is opened. - [Havenmoor](https://kombai.com/gallery/inspirations/status-icon-ios-5/) (Mobile) - [Umberfield](https://kombai.com/gallery/inspirations/status-icon-ios-33/) (Mobile) - [Marchwood](https://kombai.com/gallery/inspirations/status-icon-web-54/) (Web) ### 3. Labeled status pills A dot plus a word, like Active or Paid, often inside a tinted pill in a card or table cell. - [Elderbrook](https://kombai.com/gallery/inspirations/status-icon-ios-10/) (Mobile) - [Ashcombe](https://kombai.com/gallery/inspirations/status-icon-web-42/) (Web) - [Grantwell](https://kombai.com/gallery/inspirations/status-icon-web-48/) (Web) ### 4. Workflow state icons Icons whose shape changes with the state: an empty circle for to do, a half-filled one in progress, a check when done. - [Northwind](https://kombai.com/gallery/inspirations/status-icon-ios-1/) (Mobile) - [Pilgrimm](https://kombai.com/gallery/inspirations/status-icon-web-16/) (Web) - [Thornbury](https://kombai.com/gallery/inspirations/status-icon-web-1/) (Web) ## Where status indicators show up ### Social and streaming Live markers, viewer counts and activity rings show who is broadcasting or posting right now. - [quietcircuits](https://kombai.com/gallery/inspirations/status-icon-web-24/) (Web) - [Rookery](https://kombai.com/gallery/inspirations/status-icon-ios-26/) (Mobile) - [Braewood](https://kombai.com/gallery/inspirations/status-icon-ios-22/) (Mobile) ### Projects and tasks Tags and circles mark each task or engagement as in progress, in review, pending or done. - [Saltmarch](https://kombai.com/gallery/inspirations/status-icon-web-36/) (Web) - [Stonecross](https://kombai.com/gallery/inspirations/status-icon-web-55/) (Web) - [Mossbern](https://kombai.com/gallery/inspirations/status-icon-web-13/) (Web) ### Team and account admin Member tables and settings show who is active, who is away and which features are on. - [Teammates](https://kombai.com/gallery/inspirations/status-icon-web-25/) (Web) - [Quarrow](https://kombai.com/gallery/inspirations/status-icon-web-17/) (Web) - [Cindermoor](https://kombai.com/gallery/inspirations/status-icon-web-44/) (Web) ## Status indicator vs similar components | | [Status indicator](https://kombai.com/glossary/status-indicator/) | [Badge](https://kombai.com/glossary/badge/) | [Progress indicator](https://kombai.com/glossary/progress-indicator/) | |---|---|---|---| | Shows | A state from a fixed set | A count or a short tag | How far along a task is | | Looks like | A dot, icon or pill | A number or word in a pill | A bar, ring or step count | | Best for | Online, live, done, paid | Unread counts and New tags | Uploads, setup and checkouts | ## Build notes - Never rely on color alone. Pair each color with a label, a distinct shape or an accessible name. - Give a dot-only indicator text for screen readers, like a visually hidden "Online" next to the name. - Keep the dot at least 3:1 against what is behind it, and add a ring when it sits on a photo. - Use the same colors for the same states everywhere in the product. - Announce changes people need to know about, like going offline, through a role="status" region. - Don't animate a live dot under prefers-reduced-motion. ## FAQ ### What colors should status indicators use? Most products use green for online, active or done, amber for away or pending, red for errors, busy or live, and gray for offline or inactive. The exact palette matters less than using it the same way everywhere and never letting color be the only signal. ### What is the difference between a status indicator and a badge? A badge usually carries a count or a short tag, like 3 or New. A status indicator carries a state from a fixed set, like online or paid. They often look alike, and a labeled status pill is sometimes called a status badge. ### Where should a presence dot go on an avatar? The bottom-right corner is the common convention. Give the dot a ring in the background color so it stays visible on any photo, and keep it the same size across the app. ### How do I make a status dot accessible? Add the state as text, either visible next to the item or visually hidden for screen readers. A different icon shape per state also helps people who cannot tell the colors apart. ## Related terms - [Badge](https://kombai.com/glossary/badge/) - [Avatar](https://kombai.com/glossary/avatar/) - [Progress indicator](https://kombai.com/glossary/progress-indicator/) - [Toast notification](https://kombai.com/glossary/toast-notification/) ## References - [WCAG 2.2: Understanding Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) - [WCAG 2.2: Understanding Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) - [Material Design 3: Badges](https://m3.material.io/components/badges/overview)