Badge
Badge pins a count or a dot to the top-right corner of another element, such as an avatar or an icon button, or stands on its own next to a label. Numbers roll to their new value when they change.
Demos
Basic
Wrap the element the badge belongs to. A number, a dot, or a short string.
Type
type picks the color role. default is the error red, because a badge usually means “something needs attention”.
Max and zero
Numbers above max show as 99+. A value of 0 hides the badge unless showZero is set.
Changing value
Each digit rolls to its new value; show hides the badge without removing the element it sits on.
Processing
processing adds a slow pulse for something that is still going on.
Custom color, content and offset
color overrides the fill (the text turns white), value also takes any node, and offset nudges the badge from its corner.
Standalone
Without children the badge renders inline, for example next to a navigation label.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
value | ReactNode | undefined | A number (rolls on change, capped by max), a string, or any node. Plain values also become the tooltip. | Unreleased |
max | number | undefined | Numbers above it show as ${max}+. | Unreleased |
dot | boolean | false | Shows a dot instead of the value. | Unreleased |
type | default | primary | accent | info | success | warning | error | default | Color role. default is the error red. | Unreleased |
show | boolean | true | Hides the badge while keeping the wrapped element. | Unreleased |
showZero | boolean | false | Shows a numeric value of 0 or less. | Unreleased |
processing | boolean | false | Adds a slow, repeating pulse. | Unreleased |
color | string | undefined | Overrides the fill; the text turns white. | Unreleased |
offset | [x, y] | undefined | Moves the badge from its corner. Numbers are px; strings are any CSS length. | Unreleased |
children | ReactNode | undefined | The element the badge sits on. Without it the badge renders inline. | Unreleased |
Badge also accepts native span attributes and a ref. When the badge carries meaning a screen reader can’t get from context, give the wrapper an aria-label, for example “3 unread messages”.