Badge Notification
A compact count or dot attached to a control or destination to announce unread activity.
Added in v2.5.0 · import from "@borneo/react"
Live previewPermalink to this section
This is the production component using the active theme and component contracts.
AnatomyPermalink to this section
Every visible part has one job and a clear requirement.
| Part | Requirement | Purpose |
|---|---|---|
| Anchor | Required | The control or destination the notification describes. |
| Badge | Required | A count or dot positioned without changing anchor layout. |
| Accessible label | Required | Announces the unread meaning, not only the number. |
Variants and statesPermalink to this section
Choose a variant for meaning or layout need, never decoration alone.
| Variant | Use |
|---|---|
| Count | Shows a precise unread total up to the configured maximum. |
| Overflow | Compacts large totals to values such as 99+. |
| Dot | Signals new activity when the exact count is not useful. |
| Brand | Lower urgency than the default danger tone. |