Badge

A short static label or count, such as a status on a row or the number of unread messages. It comes in five tones: neutral, the default, and the four status tones info, success, warning and critical, which take their colors from color.status.<tone> through the badge.<tone> contract tokens.

<Badge.Root tone="success">Paid</Badge.Root>

Server Components can import it from @tounsoo/todae/badge. That entry has no 'use client' and no hooks; the main @tounsoo/todae entry is a client module.

Badge.Root is a span with no role, so a screen reader reads it as part of the text around it. A bare number has no meaning on its own: add the rest in visually hidden text.

<Badge.Root>
  3<span className="todae-visually-hidden"> unread</span>
</Badge.Root>

When to use

When: A status or count that labels something next to it: a paid invoice, a beta feature, unread messages.

When not: A label the user can remove → Chip. A message about the page or a task → Alert. Something the user clicks → Button.Root. A change you need announced → a live region, which a badge is not.

Props