Badge & Delta

Preview

Badge labels a status or a category; Delta shows a signed change colored by whether it is good.

LiveStale · 2hFailedDraftIn stockLow stockBETA

+12.4%−3.1%−1.2%+0.21 pt±0.0%

<Badge tone="live">Live</Badge>
<Badge tone="stale">Stale · 2h</Badge>
<Badge tone="failed">Failed</Badge>
<Badge tone="beta" size="sm">BETA</Badge>

<Delta value={0.124} />                       {/* +12.4% */}
<Delta value={-0.012} invert />               {/* churn: down is good */}
<Delta value={0.21} kind="pt" variant="plain" />
<Delta value={0.046} variant="arrow" />

Usage

Status tones (live, stale, failed) show a dot, and live pulses unless the reader prefers reduced motion. size="sm" is a mono tag for headers.

Pass Delta a ratio for percent (0.124 → +12.4%) or points for pt. The color comes from the rounded sign; invert flips it for metrics where down is good, such as costs and churn. tone overrides it. describeDelta returns the same text, direction and tone for your own components.

Props

Badge

PropTypeDefaultDescription

dotboolean—Leading status dot. A badge with a dot is a pill; without one, a rounded tag.

pulseboolean—Animate the dot (defaults to true for live). Respects reduced motion.

size'sm' | 'md''md'md is 24px sans; sm is an 18px mono tag for headers and inline labels.

childrenReactNode——

Also accepts the props of HTMLAttributes<HTMLSpanElement>, spread onto the root element.

Delta

PropTypeDefaultDescription

valuerequirednumber—The change. For percent pass a ratio (0.124 → +12.4%); for pt pass points (0.21).

kind'percent' | 'pt' | 'number'DeltaKind'percent'—

invertbooleanfalseDown is good (costs, churn, latency): flips the color, not the sign.

variant'soft' | 'plain' | 'arrow'DeltaVariant'soft'soft is a tinted chip, plain is colored text, arrow swaps the sign for ▲ / ▼.

digitsnumber—Decimal places (1 for percent and number, 2 for pt).

tone'positive' | 'negative' | 'neutral' | 'signal'DeltaTone—Override the computed tone, e.g. signal for a change that is neither good nor bad.

Also accepts the props of Omit<HTMLAttributes<HTMLSpanElement>, 'children'>, spread onto the root element.

Accessibility

Both render text, so the status or change is read as written.
The arrow variant hides the ▲ / ▼ glyph from screen readers and reads the signed value instead.
Color is never the only signal: the sign or the label carries the meaning.

Report an issueBuilt Oct 21, 2026