Badge

Basics

Give the Badge a tone and a text label. It renders sentence-case sans on a soft tint of the tone — a quiet, non-interactive read of one row's state.

Tones

Five semantic tones — success, warning, danger, info, neutral. Pick the tone that matches the *meaning* of the state, not the one that looks best. neutral is the default and the right choice for states that carry no urgency (draft, archived).

With a dot or icon

Add dot for a leading square, or pass an icon node. Both give the badge a second, redundant cue so status is never conveyed by colour alone.

Badge vs Tag vs Chip vs Button

These four look adjacent but encode different things, and the system keeps them apart by case and type family so a glance tells you what you can do with each:

• Badge — *status*. Sentence-case sans on a tone tint, no border, not interactive. It answers *what state is this row in?* (Settled, Failed, Syncing).
• Tag — *metadata*. Mono, as-typed, muted, optionally bordered. It answers *what is this labelled with?* (region:eu-central-1, a commit sha). Static, or copy-on-click.
• Chip — *an interactive filter*. Mono UPPERCASE, a ghost outline that inverts to the primary fill when selected. It answers *do you want to filter by this?* — it toggles.
• Button — *an action*. Mono UPPERCASE control-height; it *does* something.

Rule of thumb: if it describes a state, it's a Badge; if it's a value or key you might copy, it's a Tag; if clicking it changes the view, it's a Chip; if clicking it performs an operation, it's a Button.

Side by side

The same four elements together. Note the case shift — sentence-case Badge, as-typed Tag, UPPERCASE Chip and Button — is the fastest signal of which are actionable.

Accessibility

• Badge renders a plain `<span>` with no interactive semantics — it is decoration around a text label, so screen readers announce the label text directly.
• The `dot` and `icon` slots are `aria-hidden` — they must never carry information the text label doesn't already state.
• Tone is expressed as a background tint that meets contrast against its foreground; because status is always accompanied by text, the badge remains legible to colour-blind and monochrome readers.

Mobile (React Native)

Preview. @protocore/pds-mobile ships the React Native sibling of Badge. It mirrors the web API where React Native allows; the package is a preview with no device-level QA yet, so pin it and expect small changes.

Import it from the mobile package (not @protocore/pds), inside a <PdsProvider> — there is no stylesheet, so style (a ViewStyle) replaces className and every value comes from the theme:

import { Badge } from "@protocore/pds-mobile";

Parity with web. A static, non-interactive View — sentence-case sans, tone tint, no border, same as web.

• The tone tint is derived from the single tone colour (a low-alpha overlay) rather than web's dedicated --pds-color-<tone>-bg token, so the exact tint can differ by a hair.
• Never color-only: always pass a text label (optionally dot or an icon).

<Badge tone="success" dot>Live</Badge>