New
BadgesStatus Badge Set
Success, warning, danger and info badges - a coloured dot beside a word that carries the meaning on its own.
#badge#status#dot
5 frameworksBeginner
Loading…
A count badge that caps at "99+", hides at zero, and tells screen readers what it is counting.
<!--
The cap ("99+") is a layout decision wearing a content hat: an uncapped
counter grows one character per order of magnitude and eventually pushes
its host off-grid. The sr-only suffix is the other half of the component -
a bare "99+" announced out of context is a number, not a message.
-->
<span class="badge-counter">
99+
<span class="badge-counter__sr">unread notifications</span>
</span>| Prop | Type | Default | Description |
|---|---|---|---|
countrequired | number | - | Number shown in the badge; anything above 99 collapses to "99+". |
max | number | 99 | Max |
srLabel | string | - | Sr label |
className | string | - | Additional classes merged onto the root element. |
Three decisions do the work. The cap: `count > max` renders `"99+"` because an uncapped counter grows a character per order of magnitude until it pushes its host off-grid - `max` is a layout guarantee wearing a content hat. The zero: `count <= 0` returns `null`, since an empty red circle is a false alarm and "0" is a fact nobody pinned a badge for. The noun: `srLabel` appends sr-only text so a screen reader hears "99+ unread notifications" instead of a naked number. The `min-w` + padding combination (never a fixed width) is what lets one digit render a circle while "99+" stretches into a pill.