Badge
徽标
Aliases:徽章小红点角标状态标签计数气泡数字角标图标右上角的小圆点
What is it
A small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
Interactive playground
Try it. Make an informed choice.Compare status labels and count badges in relation to primary content.
Loading lab…
What to look for
- 01Use a concise status label instead of only a colored dot.
- 02Large counts should not destabilize badge dimensions.
✓ When to use
- Unread counts, cart quantity
- Inline status labels (success, expired, beta)
- An attention dot on an icon corner
✕ When not to use
- It needs to be clickable — use a button or chip
- Cap large counts (99+) and avoid jitter
- Long explanatory text — use an alert or body copy
Variants
Count
计数
Numeric bubble, caps at 99+
Dot
圆点
A bare dot for pure attention
Label
标签
A short text status on a tinted surface
Implementation
position: absoluteborder-radius: 9999pxbox-shadowfont-variant-numeric: tabular-numsHost is relative; the badge sits absolute at -top/-right with a ring or shadow matching the surface so it does not bleed into images. Use tabular-nums to stop width jitter and cap at 99+. Keep status colour semantics stable: red = error or urgent, green = success, grey = neutral; convey meaning beyond colour with aria-label.
Platform API
<span>Related concepts
A small round or rounded-square image representing a user or organisation: photo, initials or an icon placeholder. Appears with names in navs, comments and member lists; can carry a status dot or stack several people together.
ComponentsSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsSimilarA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsSimilar