Labels

Overview

Labels are compact, color-coded pills used to annotate an item with a status, type, or category — for example Active, Pending, or a coverage type like Medical. They come in solid variants (a filled color with white text) and outline variants (a colored border and text on a light tinted fill) for lower-emphasis contexts.

Labels are decorative and informational, not interactive — they convey state, they don't trigger it.

Guidelines

Dos

• Use labels to convey status, type, or category at a glance.
• Keep label text short and scannable — typically one or two words.
• Use color intentionally to communicate meaning (e.g. success for matched, danger for errors).
• Prefer outline labels when several pills sit together and a row of solid colors would be too heavy.
• Use solid labels for a single prominent status.

Don’ts

• Don’t use labels as interactive elements — no links or actions. Use a button or chip instead.
• Don’t pack a surface with so many labels that color stops carrying meaning.
• Don’t use custom colors outside the approved variants.
• Don’t put long sentences in a label.

Variants

Variant	Description	Example Use
Default	Neutral gray pill	General labeling, metadata
Primary	Brand-emphasized	Featured or highlighted state
Success	Positive / completed status	Active, Approved, Matched
Info	Informational status	Details, Processing
Warning	Cautionary / pending status	Pending, Needs Review
Danger	Critical / error status	Error, Blocked

Solid labels

Apply .label with a color modifier. White text sits on the solid brand color.

Outline labels

Apply .label with a .label-outline-* modifier for a colored border and matching text on a light tinted fill. These are a lighter-weight alternative to solid labels, suited to inline status or type pills — for example Matched / Processing / Needs Review, or change types like Add / Term / Change.