Badge

Atombeta@macaw-ds/ui · since 0.1.0

A short, non-interactive status label such as Paid, Overdue or Draft. Not a button, not a counter.

When to use

A record's state, shown as a word or two: Paid, Pending, Overdue, Refunded, Draft, Active. Badges sit in table cells, card headers and detail pages next to the thing they describe.

When not to use

Counts. "12 unread" is Text numeric, not a badge.
Actions or filters. Badges are not interactive. A removable chip or a filter toggle is a different component (not in the system yet; report not-in-system).
Emphasis. A badge means a state. Do not use critical to mean "important".

Tone means something

Tone	Means
`success`	Settled, paid, active
`warning`	Pending, needs attention, expiring
`critical`	Failed, overdue, blocked
`info`	Refunded, informational
`accent`	Highlighted, new
`neutral`	Draft, archived, inactive

Accessibility

The word carries the meaning; colour only reinforces it. Every tone pairing meets 4.5:1 in both themes.
The dot is decorative and hidden from assistive technology.
A badge has no role and is not focusable. Screen readers read it inline with the surrounding text.

Do and don't

Do

Use soft badges in tables and solid on a record's header.
Use dot with neutral for "Draft" and with success for "Active".

Don't

Do not make badges clickable; they have no role and no focus style.
Do not use badges as counters; a count is Text numeric.

Rules

Hard rules an agent must follow. The reviewer agent and the lint config check the ones that can be checked.

The label is a word or two that states the status in plain language.
Tone follows meaning, not decoration: critical means failed or overdue, never "important".
One badge per status; do not stack badges to combine meanings.

Text