Badge

Accessibility

• The label carries the meaning. The mark only supports it, and each tone has its own glyph.
• Counts need an accessible name, like 3 unread messages.
• Badge State speaks its state, or pass label={null} when text beside it says the same.

Motion

• Enters at 0.9 scale and fades in over 150 ms, then sits still.
• Tone changes crossfade in 150 ms.
• Count digits roll, and the count pops in and scales out as it clears.
• State glyphs swap on a soft spring with a blur. Loading turns once a second.
• With reduced motion, entry is a 120 ms fade, digits swap and the loading glyph holds still.

Responsive behavior

• 20, 24, 28 px on Web and 24, 28, 32 px on Mobile.
• Count is 16 and 20 px on Web, 18 and 22 px on Mobile. State stays 20, 24, 32 px.

Performance

• Badge is a span or link with CSS fades, no Motion and no state.
• BadgeCount and BadgeState load Motion for their pop and glyph swap, and stay idle until a value changes.
• Count digits roll in place and the number never reflows the row.

• Import Badge, BadgeCount, BadgeAnchor and BadgeState. Badge props: tone, variant, size, mark, icon, href, animated.
• tone sets the mark color only, and each tone has its own glyph. href turns it into a link with an arrow.
• BadgeCount needs label, hides at zero and shows a dot without value. Set label={null} on BadgeState when text beside it says the same.
• Wrap an Icon Button or Avatar in BadgeAnchor to sit a count on its corner.