Badge

Badge labels an item with a short status or category. It is one inline element with five tones, two sizes, an optional dot, and no JavaScript.

Public web API

One root hook on a <span>, an optional dot part, a tone variant, and a small size.

<span data-bitsy-badge>Draft</span>
<span data-bitsy-badge data-bitsy-variant="success">
  <span data-bitsy-badge-dot aria-hidden="true"></span>Active
</span>
<span data-bitsy-badge data-bitsy-variant="error" data-bitsy-size="sm">Failed</span>

data-bitsy-variant is brand, success, warning, or error; omit it for neutral.
The text must say the status. Color is never the only signal.
A Badge is not interactive. Use a Button or a link for actions.
Keep it to two words; use an Alert for a sentence.

Tones and sizes

Each tone with and without the dot, at both sizes.

Neutral Brand Success Warning Error

In context

Inline in a paragraph, in a Card header action, and in a dense table cell.

Release 2.4 is Live and the migration guide is still a Draft, so the Inbox 12 count stays on the sidebar.

Starter plan

For personal projects.

Current

Up to 3 projects and 1 GB of storage.

Service	Status
API	Active
Billing	Degraded
Webhooks	Failed

Foundation versus Bit

The foundation has no compact pill or status tones. data-bitsy-badge adds both, plus the dot and a small size. It ships no JavaScript and defines no tokens of its own beyond its --bitsy-badge-* hooks.