Components

Badge

A small status pill — the data layer's vocabulary for state: RAG delivery health, on-track / at-risk, or a category tag in a table cell.

Install

npx shadcn@latest add @alix/badge

Preview

On trackAt riskOff trackPhase 2DraftArchived

Usage

<Badge variant="success" dot>On track</Badge>
<Badge variant="warning" dot>At risk</Badge>
<Badge variant="destructive" dot>Off track</Badge>
<Badge variant="outline">Archived</Badge>

Examples

Size scale

Small badges fit dense table cells; medium badges work in card metadata and summaries.

DraftPhase 1In reviewClient-ready

<Badge size="sm" variant="neutral">Draft</Badge>
<Badge size="sm" variant="primary">Phase 1</Badge>
<Badge variant="neutral">In review</Badge>
<Badge variant="primary">Client-ready</Badge>

Status without dots

Drop the dot when the text itself is the classification rather than a RAG health signal.

ApprovedNeeds reviewBlockedArchived

<Badge variant="success">Approved</Badge>
<Badge variant="warning">Needs review</Badge>
<Badge variant="destructive">Blocked</Badge>
<Badge variant="outline">Archived</Badge>

Inside a data table

Badge composes into DataTable cells while Panel owns the framed dashboard surface.

Delivery health

Priority engagements

Delivery health by engagement
Client	Lead	Health
Northstar Retail	A. Ward	On track
Cobalt Health	M. Khan	At risk
Summit Capital	R. Silva	Off track

<Panel title="Delivery health" description="Priority engagements" flush>
  <DataTable
    caption="Delivery health by engagement"
    dense
    rows={[
      { client: "Northstar Retail", lead: "A. Ward", status: "On track", tone: "success" as const },
      { client: "Cobalt Health", lead: "M. Khan", status: "At risk", tone: "warning" as const },
      { client: "Summit Capital", lead: "R. Silva", status: "Off track", tone: "destructive" as const },
    ]}
    columns={[
      { key: "client", header: "Client", cell: (row) => row.client, cellClassName: "font-medium" },
      { key: "lead", header: "Lead", cell: (row) => row.lead },
      {
        key: "status",
        header: "Health",
        cell: (row) => <Badge variant={row.tone} dot size="sm">{row.status}</Badge>,
      },
    ]}
  />
</Panel>

When to use it

Use it for

RAG health, phase, approval, and category labels in dashboards or table cells.
Compact metadata beside insights, people, and engagement summaries.
A leading dot when the badge communicates operational status at a glance.

Reach for something else

Inline trend numbers or percentage deltas — use Delta instead.
Completion bars or process progress — use Progress instead.
Clickable filters or binary choices — use Checkbox or Select instead.

Props

Prop	Type	Default	Description
variant	"neutral" \| "primary" \| "success" \| "warning" \| "destructive" \| "outline"	"neutral"	Tinted surface + matching text, picked by meaning. success/warning/destructive are the RAG trio; outline is the quiet, un-tinted option.
dot	boolean	false	Leading status dot in the variant's colour — the RAG idiom. A circle even though the system is otherwise sharp-cornered.
size	"sm" \| "md"	"md"	Padding + text scale of the pill.
children	ReactNode	—	The label (data prop) — a string, or a node if you need an icon alongside it.