COMPONENTS / TAG

Tag

Compact mono label for categories, statuses, and filters. Rectangular, hairline-bordered — never a pill. Three surfaces: outline (default), accent (state), solid (emphasis, rare). Interactive only when it filters or removes.

VERSION1.0.0

TOKENS8 CONSUMED

CONTRASTAA / AAA

DEPENDENCIESNONE

01 / LIVE INSTANCES — ALL STATES

HOVER FORCED FOR SPECIMEN

VARIANT

STATIC

HOVER (INTERACTIVE)

NOTES

OUTLINE

DESIGN SYSTEM

DEFAULT. SPANS ARE INERT, A/BUTTON ARE INTERACTIVE.

ACCENT

SHIPPED

—

STATE ONLY — NEVER DECORATION.

SOLID

NEW

—

ONE PER VIEW, LIKE THE PRIMARY BUTTON.

REMOVABLE

ASTRO

× IS ITS OWN BUTTON — SEPARATE HIT TARGET.

DISABLED / LOADING / ERROR: N/A — A TAG IS METADATA. IF IT CAN FAIL, IT IS A BUTTON WEARING A COSTUME.

02 / ANATOMY — EXPLODED VIEW

01 FRAME
--hair BORDER · --r1 · NO FILL

DESIGN SYSTEM

02 LABEL
--font-mono · --t1 · UPPERCASE · --fg-muted

03 REMOVE (OPTIONAL)
OWN <BUTTON> · GAP --s1

FIG. G-01 — PADDING --s1 BLOCK / --s2 INLINE. ASSEMBLED HEIGHT ≈ 22PX.

03 / TOKENS CONSUMED

PROPERTYTOKENVALUE

FONT--font-mono / --t112PX UPPERCASE

PADDING--s1 / --s24 / 8PX

BORDER--hair1PX --line

RADIUS--r12PX — NEVER A PILL

TEXT--fg-muted#6C6A64

ACCENT SURFACE--accent-soft / --accent-inkWASH + INK

SOLID SURFACE--fg / --bgINVERTED PAIR

HOVER--accentBORDER + TEXT

04 / CODE — COPY-READY

<!-- inert metadata -->
<span class="tag">DESIGN SYSTEM</span>
<span class="tag tag--accent">SHIPPED</span>
<span class="tag tag--solid">NEW</span>

<!-- interactive filter -->
<a class="tag" href="/tags/astro">ASTRO</a>

<!-- removable filter -->
<span class="tag">ASTRO
  <button class="tag__x"
          aria-label="Remove filter Astro">×</button>
</span>

/* CSS — components.css / TAG */

05 / RESPONSIVE BEHAVIOUR

≥1024INLINE ROWS, GAP --s2, WRAP FREELY.

640–1023UNCHANGED.

<640INTERACTIVE TAGS GET PADDING --s2/--s3 SO THE HIT TARGET CLEARS 44PX WITH LINE SPACING.

06 / ACCESSIBILITY

ELEMENT<SPAN> INERT · <A> NAVIGATES · <BUTTON> ACTS. NEVER DIV+ONCLICK.

ARIAREMOVE BUTTON: ARIA-LABEL NAMES WHAT IT REMOVES.

FOCUSGLOBAL RING. REMOVE × FOCUSES SEPARATELY FROM THE TAG LINK.

CONTRASTOUTLINE TEXT 5.2:1 AA · ACCENT 4.6:1 AA · SOLID 18.2:1 AAA.