--- title: "Badge UI: anatomy, variants and examples | Kombai" description: "A badge is a small label or count pinned to an item, so people see what is new, how many are waiting or what state it is in." canonical_url: https://kombai.com/glossary/badge/ author: "The Kombai Team" --- # Badge A badge is a small label or count pinned to an item, so people see what is new, how many are waiting or what state it is in. - Also called: tag, pill, label, count - Platforms: Web, Mobile - [Perch](https://kombai.com/gallery/inspirations/followers-following-ios-22/) (Mobile) - [Trove](https://kombai.com/gallery/inspirations/search-web-1/) (Web) - [Roamdesk](https://kombai.com/gallery/inspirations/misc-web-5/) (Web) ## What is a badge? A badge is a short piece of text or a number in a small shape, attached to something else on the screen. It can count what is waiting, like unread messages, name a state, like Paid or Draft, or flag an item, like New or Most popular. A badge only describes. The thing it is attached to does the work when people tap it. - It is small and sits on or next to the item it describes, like an icon, a row or a card. - It carries one word or one number, and the text, not only the color, says what it means. ## When to use badge - **Something is waiting.** Unread messages, items in a cart or tasks assigned to someone. - **Items have a state.** Invoices, orders and tasks that move through steps like Draft, Paid or Done. - **One item should stand out.** A new feature, a recommended plan or a product on sale. ## When not to use one - **People need to act on it.** A badge is a label. If tapping it should do something, use a button or a chip. - **Everything gets one.** When every row has a badge, none stands out. Keep them for the exceptions. - **The message needs a sentence.** Explain a problem in an inline message or a banner, not in a pill. ## Anatomy 1. **Host**: The item the badge describes 2. **Count badge**: A number, capped at 99+ 3. **Status badge**: One word for the state 4. **Label tag**: Flags new or featured items 5. **States**: Count, capped, dot, cleared ## Variants We sorted the badge designs we found across the Kombai gallery into five patterns. ### 1. Count badges A number on an icon, a tab or a nav item that says how many things are waiting, like unread messages or items in a basket. - [Credo](https://kombai.com/gallery/inspirations/settings-ios-3/) (Mobile) - [Plinthos](https://kombai.com/gallery/inspirations/canvas-web-15/) (Web) - [Forkful](https://kombai.com/gallery/inspirations/recipe-detail-ios-8/) (Mobile) ### 2. Status badges A tinted pill with one word, like Paid, Draft or In review, that tells people where an invoice, order or task stands. - [Rosemoor](https://kombai.com/gallery/inspirations/book-a-demo-web-77/) (Web) - [Corundum](https://kombai.com/gallery/inspirations/billing-ios-3/) (Mobile) - [Kelso](https://kombai.com/gallery/inspirations/book-a-demo-web-57/) (Web) ### 3. New and Beta tags A small tag beside a menu item or setting that points out something people have not tried yet. - [Alderpath](https://kombai.com/gallery/inspirations/search-web-21/) (Web) - [Alder](https://kombai.com/gallery/inspirations/dark-mode-ios-4/) (Mobile) - [Halyard Studio](https://kombai.com/gallery/inspirations/home-web-55/) (Web) ### 4. Highlight badges Most popular, Best value or Recommended, set on the edge of one plan or option to steer the choice. - [Sundial](https://kombai.com/gallery/inspirations/pricing-page-web-58/) (Web) - [Fern & Fig](https://kombai.com/gallery/inspirations/card-ios-173/) (Mobile) - [Marnix](https://kombai.com/gallery/inspirations/radio-button-ios-3/) (Mobile) ### 5. Discount badges A percent off or a Sale tag on a product or plan, usually next to the struck-through price. - [Thistlebox](https://kombai.com/gallery/inspirations/shop-and-storefront-web-17/) (Web) - [Verdel Market](https://kombai.com/gallery/inspirations/tabs-ios-141/) (Mobile) - [Wichmarsh](https://kombai.com/gallery/inspirations/subscription-paywall-ios-85/) (Mobile) ## Where badges show up ### Inboxes and notifications Counts on the inbox, the bell and each conversation, so people know where new messages are before they open anything. - [Orbit](https://kombai.com/gallery/inspirations/notifications-ios-1/) (Mobile) - [Vireo](https://kombai.com/gallery/inspirations/trash-archive-ios-14/) (Mobile) - [Wynden](https://kombai.com/gallery/inspirations/timer-clock-web-12/) (Web) ### Shop listings Sale, Sold out, New and Featured tags on product and listing cards, read at a glance while people scroll. - [The Tarnbrook Ledger](https://kombai.com/gallery/inspirations/shop-and-storefront-web-99/) (Web) - [Orchard Row](https://kombai.com/gallery/inspirations/card-ios-144/) (Mobile) - [Meridian Lane](https://kombai.com/gallery/inspirations/carousel-web-7/) (Web) ### Plans and memberships PRO marks on paid members and Save or Best value tags on the plans people are choosing between. - [Shoalcast Pro](https://kombai.com/gallery/inspirations/pricing-page-ios-30/) (Mobile) - [Tallowmere](https://kombai.com/gallery/inspirations/button-web-23/) (Web) - [Vellum](https://kombai.com/gallery/inspirations/search-web-9/) (Web) ## Badge vs similar components | | [Badge](https://kombai.com/glossary/badge/) | [Status indicator](https://kombai.com/glossary/status-indicator/) | [Filter chips](https://kombai.com/glossary/filter-chips/) | |---|---|---|---| | Carries | A short word or a number | A dot or an icon | A filter name | | Can be tapped | No, it only describes | No | Yes, it turns a filter on or off | | Best for | Counts, states and highlights | Live state, like online or synced | Narrowing a list | ## Build notes - Render a badge as a plain . It describes something, so it is not a button and takes no keyboard focus. - Put the count in the accessible name of the control it sits on, like aria-label="Inbox, 3 unread", rather than reading "3" on its own. - Cap counts, for example at 99+, so the badge keeps its size and does not cover the icon. - When a count changes while people watch, announce it through a polite live region, so screen reader users hear it too. - Don't rely on color alone. Write the state, like Paid or Overdue, and keep text contrast at 4.5:1 against the badge fill. - Hide a count badge at zero, rather than showing a 0. ## FAQ ### What's the difference between a badge and a chip? A badge only describes something, like a count or a status, and nothing happens when people tap it. A chip is a control: people tap it to filter a list, pick an option or remove a tag. If it needs a hover or a pressed state, it is a chip. ### Should a count badge show the exact number? Up to a point. Exact counts help when the number is small and people act on each item, like unread messages. Above a limit, such as 99, show 99+ so the badge stays small. When the number does not matter, a plain dot that says something new is waiting is enough. ### How do screen readers read a badge? They read its text where it sits in the page, so a lone "3" next to a bell means little. Give the bell button a name that includes the count, like "Notifications, 3 unread", and hide the visual number from assistive tech with aria-hidden so it is not read twice. ### Are badges and achievement badges the same thing? No. In interface design a badge is the small label or count on an item. Achievement badges are rewards people earn in games and learning apps, closer to an icon or an illustration. ## Related terms - [Status indicator](https://kombai.com/glossary/status-indicator/) - [Filter chips](https://kombai.com/glossary/filter-chips/) - [Avatar](https://kombai.com/glossary/avatar/) - [Tabs](https://kombai.com/glossary/tabs/) ## References - [Material Design 3: Badges](https://m3.material.io/components/badges/overview) - [WCAG 2.2: Understanding use of color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)