Content & display

Badge

Q: How do people describe a Badge in plain words?

the little red number on the corner of an icon that dot that means I have unread messages a small count bubble on the cart or bell icon

Q: How do I implement a Badge?

Add an unread badge on the bell icon: show a red count up to 99+, use a plain dot when count is unknown, and include an accessible label like '3 unread notifications'.

A compact count or status mark attached to an icon, tab, or label.

Also known as count badge · notification dot · status pill

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Badge".

Add an unread badge on the bell icon: show a red count up to 99+, use a plain dot when count is unknown, and include an accessible label like '3 unread notifications'.

Anatomy:
- mark: Dot or numeric pill, usually top-end of the host.
- host: Icon, avatar, or tab the badge annotates.

Preferred API / pattern: `shadcn Badge / custom absolute count`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Color-only badge with no text alternative for SR users.
○Avoid: Badge numbers growing without cap
○Avoid: Badge used as the only click target without a named control.

In plain wordsHow people search for it

“the little red number on the corner of an icon”“that dot that means I have unread messages”“a small count bubble on the cart or bell icon”

AnatomyOpen for part names

mark: Dot or numeric pill, usually top-end of the host.
host: Icon, avatar, or tab the badge annotates.

How to write itOpen for stack patterns

Web (HTML/CSS)positioned span / aria-label with count

React + Tailwind + shadcn/uishadcn Badge / custom absolute count

SwiftUI.badge() / overlay Text

Ant Design<Badge count> / <Badge dot>

Notes

Badges draw attention to counts or status. Cap large numbers (99+). Dot badges need a non-color text alternative for screen readers. Don't put critical actions only in a badge—it's an indicator, not a control.

Common mistakesHumans and models trip here

Color-only badge with no text alternative for SR users.
Badge numbers growing without cap: use 99+.
Badge used as the only click target without a named control.

More failure symptoms on AI broke it.

Related patterns

AvatarA compact image or initials representing a person or entity.Tag / ChipCompact labels for categories, filters, or metadata—sometimes removable.TabsA row of labels that swap mutually exclusive views in the same place.

Spotted a wrong name or missing pattern?

Message on X