Badge
stable 0.5 kB<hk-badge>A count or a dot, anchorable to any element. Counts past the cap collapse to "99+" so the badge never widens the layout underneath it.
#count#dot
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| count | number | 0 | Number shown. Zero hides the badge unless showZero. |
| max | number | 99 | Cap; anything above renders as "max+". |
| variant | 'count' | 'dot' | 'count' | Number or a bare dot. |
| showZero | boolean | false | Keeps the badge visible at zero. |
| tone | 'danger' | 'neutral' | 'success' | 'danger' | Colour. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-badge-bg | #dc2626 | Badge fill. |
| --hk-badge-text | #ffffff | Badge text colour. |
| --hk-badge-ring | #ffffff | Ring separating it from the content beneath. |
Accessibility
- The count is announced with its meaning through aria-label — "12 unread notifications", not a bare "12".
- A dot badge is aria-hidden and relies on its host having a real accessible name.
- Capping at max keeps the badge from resizing the control it is anchored to.