Components

Badges and tags

Badges state a fact about what they sit next to. Tags are editable labels you can remove. Both stay within the semantic colour set — no decorative colours.

Examples

import { StatusBadge, Tag } from "@luc/ui";

Badge tones

Tone carries meaning: neutral is metadata, accent is emphasis, status tones mirror the palette.

DraftSelectedOutline+12.4%-3.2%DegradedScheduled

<Badge tone="neutral">Draft</Badge>
<Badge tone="accent">Selected</Badge>
<Badge tone="positive" dot>+12.4%</Badge>

Sizes and shapes

Small uppercase micro labels read as metadata; medium and large behave more like inline status.

sm · micro uppercasemd · defaultlg · standalone

Pill shapeLiveRounded (default)

<Badge size="sm">sm · micro uppercase</Badge>
<Badge size="md">md · default</Badge>
<Badge size="lg">lg · standalone</Badge>

<Badge shape="pill" tone="neutral">Pill shape</Badge>
<Badge shape="pill" tone="accent" dot>Live</Badge>
<Badge shape="rounded" tone="neutral">Rounded (default)</Badge>

Status badges

A fixed vocabulary so “healthy” means the same thing everywhere — with an optional pulse for genuinely live data.

LiveHealthyDegradedPendingStaleDownUnknownCustom label

<StatusBadge status="live" />
<StatusBadge status="healthy" />
<StatusBadge status="degraded" />
<StatusBadge status="pending" />
<StatusBadge status="stale" />
<StatusBadge status="down" />
<StatusBadge status="unknown" />
<StatusBadge status="healthy" size="sm" label="Custom label" />

In context

bt_momentum_v4

Healthy

daily1h barsSharpe 1.42

candlestick ingestion

2h late

A warning badge is a nudge, not an alarm. Reserve negative for genuine failure.

API

Component props
Prop	Type	Default	Notes
`Badge tone`	`"neutral" \| "accent" \| "positive" \| "negative" \| "warning" \| "info" \| "outline"`	`"neutral"`	Uses the semantic colour set.
`Badge size`	`"sm" \| "md" \| "lg"`	`"md"`	sm is uppercase micro (11px).
`Badge dot`	`boolean`	`false`	Leading status dot that inherits the tone colour.
`Tag onRemove`	`() => void`	`—`	Renders a labelled remove button inside the tag.
`StatusBadge status`	`StatusPreset`	`—`	live, healthy, degraded, pending, stale, down, unknown.

Usage

import { Badge } from "@luc/ui/components/badge";

<Badge tone="positive" size="sm" dot>
  Verified
</Badge>

Guidelines

Use `Badge` for a state the surrounding row already explains, and `Tag` for an author-assigned label the reader may remove.
Pass `removeLabel` whenever `onRemove` is set: the remove affordance is an icon control, and that prop is its accessible name.
Keep a badge to one or two words including the unit, and use `dot` for a state that is live right now.

Don't

Let `tone` carry the meaning alone — pair it with a word (`Verified`, `Draft`), because colour does not survive a screen reader or greyscale.
Put a sentence in a badge; it is a micro-label, and the row's own text is where a sentence belongs.

Accessibility

Both pieces are inline text, so they are read in the row's own order. A removable `Tag` renders a real button named by `removeLabel`, and the `dot` is decorative rather than a second name.