Badge

Mono, uppercase, tracked — the catalog-label convention for status and meta values. An archivist's tag, not a badge asking for attention.

Labels are catalog-style: short, mono, uppercase — SAVED, RECOMMENDED, OVERDUE. Never a click handler on one; a Badge is a label, not a button.

A <span> is too generic to style bare — it shows up all over running prose for unrelated reasons — so Badge keeps one class. Tone is an attribute, not a modifier class.

Tones

<span class="badge">Unassigned</span>
<span class="badge" data-tone="accent">Draft</span>
<span class="badge" data-tone="success">Saved</span>
<span class="badge" data-tone="danger">Overdue</span>

In a set

<div class="badge-set">
  <span class="badge" data-tone="accent">Recommended</span>
  <span class="badge">Every 2 weeks</span>
  <span class="badge" data-tone="danger">3d overdue</span>
</div>

Rules

• A badge is never interactive. No click handlers, no <button>, no cursor change. If it does something, it is a button that happens to be small.
• Two or three words at most. A badge that wraps is a sentence in the wrong clothes.
• danger means something needs attention, not that something failed. Use it for overdue, not for a system error — that is what prose is for.

API