Badge

Badge is a small label. Its main job is the unread count: a pink sticker that says something waits for the person. When someone mentions the person, a yellow @ marker takes its place, because it is more specific. Other appearances of Badge make the soft-tinted and hairline labels that status chips and tags are built from (Status).

When to use

Anatomy

• Badge: the label. It holds a number, a word, or an icon and a word.
• Badge.Experimental: a preset that reads Experimental, so every experimental surface shows the same label.

Variants

variant picks the color role. Choose it by what the color means, not by how it looks (Meanings of color): on a count, accent is the pink of "to do" and primary the yellow of "you".

States

• A Badge rendered as a button (render={<button />}) shows the medium tier on hover and press (sticker-medium on a colour badge), and the shared disabled look (States).
• The selected row never shows a count or an @ marker (States).

Content

• Write the number alone, in Space Mono. Above 99, write 99+.
• Don't write a count in the @ marker: it says only that someone mentioned the person.

Accessibility

Badge renders a <span> and wraps no Base UI primitive.

• Give a count or an @ marker with no words next to it role="img" and an aria-label that says what it means: "3 unread", "Mentions you".
• Give a Badge rendered as a button an aria-label that names its action ("Open thread replies") when its text doesn't.

Rules

• Show at most one badge per row, in the same column as the time.
• When a row has both unread messages and a mention, show only the @ marker.
• Use the gray number for a muted place, never the pink sticker: the person chose not to be called by it.
• Put only the attention dot on rail and tab bar icons and on the bell, never a number.