Count badge
Notification count badges with 99+ overflow, a bump on increase, dot mode with pulse, and corner positions on avatars and icons.
Preview
3 unread messagesMore than 99 notificationsNKNew activity from NoorTBNo new activity from Theo
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | — | The count; going up bumps the badge. |
| label | string | — | What is counted, for screen readers. |
| max | number | 99 | Above this, show max+. |
| dot | boolean | false | A plain dot instead of a number. |
| showZero | boolean | false | Keep the badge visible at zero. |
| tone | "accent" | "danger" | "neutral" | "accent" | Colour. |
| position | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-right" | Corner when wrapping children. |
| pulse | boolean | false | Soft pulsing ring in dot mode (live presence). |
| inset | number | 0 | Pull the badge inward in px (round avatars). |
| children | ReactNode | — | The avatar or icon the badge sits on; omit for standalone. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.