Badge

Badges show notifications, counts, or status information on navigation items and icons.

Developer experience

Wrap what the badge marks: <Badge label={3}><Icon icon={iInbox} /></Badge>. The wrapper provides the positioned container itself, so the anchoring never depends on a relative the caller has to remember.
No label renders the small dot Material uses for an unread notification; any label renders the large pill. The variant follows from the content, so a small badge carrying a count cannot be expressed.
max caps a count the way Material spells it: label={100} max={99} renders 99+.
Hiding the badge once its destination is selected is the caller's decision: set visible={false} rather than unmounting it, so it can animate out. The show/hide scale-and-fade is implemented once with anime.js in @udixio/core/dom; transition tunes it, and reduced motion skips it.

description is what a screen reader announces. Give it the meaning, not the number: 3 unread messages, not 3. It is rendered as visually hidden text inside a live region, so a changing count announces the whole sentence rather than the bare digit, and the visible number is hidden from assistive technology so it is not read twice.
Without a description the badge is hidden from assistive technology rather than announced as a bare digit or as nothing at all; so is a badge that is not visible.

Material limits badge content to four characters including the +. Nothing truncates: silently dropping a caller's text would hide data, and max is the tool for the count case.
The badge is positioned against its own wrapper, so it marks whatever it wraps rather than an arbitrary element elsewhere on the page. Material anchors badges inside the icon bounding box, so wrap the icon: wrapping a control with a large touch target anchors to that target instead, pushing the badge away from the icon by the padding around it.

React props
Name	Type	Required	Default	Description
`label`	`string \| number`	No	`—`	Text shown inside the badge. Omitted, the badge renders as the small dot Material 3 uses for an unread notification. Material limits badge content to four characters including a `+`; use `max` to keep a count within that.
`max`	`number`	No	`—`	Caps a numeric `label`. A label of 100 with `max` 99 renders `99+`. Ignored when `label` is not a number.
`description`	`string`	No	`—`	What assistive technology announces for the badge, such as `3 unread messages`. The visible label is rarely enough on its own -- `3` says nothing about what there are three of -- and the small dot has no text at all, so this is the only way it reaches a screen reader.
`visible`	`boolean`	No	`true`	Whether the badge is shown. Default: `true`. Set it to `false` rather than unmounting the badge, so it can animate out; it stays in the DOM, invisible and hidden from assistive technology, until it is shown again. Material recommends clearing a badge once its destination has been viewed.
`transition`	`BadgeTransition`	No	`—`	Anime.js show-hide timing.
`className`	`string \| Partial<Record<"container" \| "label" \| "badge" \| "announcement", string>> \| ClassNameComponent<BadgeInterface>`	No	`—`	Root classes (string), static element classes (object), or state-aware element classes (function).
`children`	`ReactNode`	No	`—`	The icon or item the badge is anchored to.