Badge

When to use

Use Badge to overlay unread counts, presence dots, or verification marks on icons and avatars. It represents a quantity or binary presence. Use Chip for removable category or status labels, or Dot for an independent semantic status point.

Import

Props

Slots

Pitfalls

Precedence is content over dot over count. A zero count hides the badge unless showZero is explicit. Circular hosts often need a small outward offset to place the badge precisely on their edge.

Related

Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Dot

Pitfalls

• The `signal` variant needs `@hulianui/tokens` >= 0.10.0 (that release adds --color-signal-*). On older versions the component's built-in fallback chain degrades to the themed colors rather than rendering a transparent chip; upgrading the tokens package switches it on.
• Do not override the colors just because the badge is "red with black text" in dark mode. That is not a bug, it is what themed necessarily produces: in dark mode --color-danger moves up to the 400 step (#fc5855), so its paired foreground has to flip to near-black for contrast (white text would only reach 3.15, below AA). If you want red with white text, use the default signal, whose steps hold up in both themes (danger-600 #d40924: 5.43 against white text, 3.66 against a dark page, 5.21 against a light one).
• The four signal colors are not the same numeric step (danger/brand use 600, success/warning use 700): green and amber are naturally lighter at the same step, and their 600 step only reaches 3.97 / 3.76 against white text, short of the 4.5 AA threshold. The steps were picked by contrast, not by aligning numbers.