Badges

Summary

Small numeric counters: unread counts, totals, "3 issues". One neutral gray style; badges deliberately don't carry status colors (that's a lozenge's job). Inside buttons and the header the badge adapts its contrast automatically.

The contrast adaptation keys on the badge being a direct child: .neura-button-primary > .neura-badge inverts to a translucent white tint, header links (.neura-header a) invert theirs in the pressed (:active) state, and disabled buttons keep the matching tint.

Examples

HTML

<span class="neura-badge">3</span>
<span class="neura-badge">12</span>
<span class="neura-badge">99+</span>
<button class="neura-button">Inbox <span class="neura-badge">7</span></button>
<button class="neura-button neura-button-primary">Alerts <span class="neura-badge">2</span></button>

AUI compatibility

aui-badge aliases onto neura-badge. CSS-only; no JS API.