Badges

stable

Badges communicate status, category, or metadata at a glance. They are informational only — never interactive. Each variant uses an opaque palette fill so it reads clearly on any surface without requiring dark-mode overrides.

Variants

All seven variants share the same base dimensions. Mix them freely within a layout — the distinct fills create their own visual hierarchy.

Label	Class	Background	Text	Use
General	.badge-general	--bm0-sand	--in0-void	Neutral, uncategorised content
Published	.badge-published	--bl3-moss	--color-accent-text	Active, live, stable, success state
Draft	.badge-draft	--bl2-grain	--color-accent-text	In-progress, pending, warning state
Archived	.badge-archived	--bl0-ember	--color-accent-text	Deprecated, removed, error state
Beta	.badge-beta	--bl4-heather	--color-accent-text	Experimental feature, preview release
Research	.badge-research	--bl1-ochre	--color-accent-text	Discovery phase, annotation, exploration
Category	.badge-category	--fo2-forest	--color-accent-text	Primary content category label

Usage guidance

Choose variants by semantic meaning, not by colour preference.

Situation	Variant
Content is live and visible to end users	Published
Content is being worked on and not yet live	Draft
Content is no longer active, or an action has failed	Archived
A feature is released but not yet stable	Beta
Item is in a discovery or annotation phase	Research
Label indicates content type or taxonomy	Category
No meaningful status or category applies	General

One badge per item. Stacking multiple badges on one item signals ambiguity in the data model, not nuance in the UI. Resolve it at the data level.

Never make badges interactive. For clickable filters or dismissible tags, use a different component. A badge communicates state; it does not change it.

Anatomy

Apply the base .badge class first, then exactly one variant modifier. The full set of base dimensions and variant rules are in the CSS reference below.

<span class="badge badge-published">Published</span>

CSS reference

These classes are shipped in dist/farn-components.css. Load it alongside farn.css or farn-tokens.css.

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.badge-general   { background: var(--bm0-sand);    color: var(--in0-void); }
.badge-published { background: var(--bl3-moss);    color: var(--color-accent-text); }
.badge-draft     { background: var(--bl2-grain);   color: var(--color-accent-text); }
.badge-archived  { background: var(--bl0-ember);   color: var(--color-accent-text); }
.badge-beta      { background: var(--bl4-heather); color: var(--color-accent-text); }
.badge-research  { background: var(--bl1-ochre);   color: var(--color-accent-text); }
.badge-category  { background: var(--fo2-forest);  color: var(--color-accent-text); }