imitation
Badge
A count or dot on another element.
BadgeCount or dot on anything
✉3★12✎MC1
✉99+
✎
✉
On trackAt riskOverdueIn review
In context
Inbox3 unread on the tab, a dot per new item
Inbox
MC
Maya mentioned youHarbour homepage
PN
Priya shared a fileCrew interviews
Props
| Prop | Type | Required | Default |
|---|---|---|---|
count | number | undefined | No | — |
max | number | undefined | No | 99 |
dot | boolean | undefined | No | — |
tone | BadgeTone | undefined | No | error |
showZero | boolean | undefined | No | — |
content | ReactNode | No | — |
className | string | undefined | No | — |
Accessibility
The indicator is a positioned <span> and is not announced on its own. A count that matters (unread messages) needs an aria-live region or an aria-label on what it wraps.
data-rebar-* attributes
data-rebar-component="badge", data-rebar-part="indicator" (on the wrapped form), data-rebar-tone.
Migrating to Ant Design
Not codemod-covered: AntD's Badge uses status/color rather than tone; count/overflowCount map to count/max.