Tag

Atom

An inline label chip for status, category, or metadata. Comes in 8 colors (blue, red, green, yellow, orange, purple, grey, black) × 3 variants (Filled, Outline, Semi) × 4 sizes (lg, md, sm, xs). Use Tag for at-a-glance labelling — keep the label one or two words.

When to use

✅ Do

Use for categorisation labels, filter chips, and status indicators
Keep label text to 1–2 words — Tags are at-a-glance indicators
Use in the trailing slot of Options rows for metadata
Use Outline or Semi variant when the tag needs to sit lightly on a coloured surface
Use consistent colour semantics — e.g. always Red for errors, Green for success

❌ Don't

Use Tags as buttons for actions — use Button instead
Stack more than 3–4 tags in a single row without wrapping
Use Tag for long descriptions — keep it to 1–2 words maximum
Mix Filled and Outline variants in the same list

DigiLawyer Patterns

No specific DigiLawyer patterns documented yet — to be added.

Anatomy

A Tag has optional leading and trailing icon slots around a required label. The canonical pattern is [icon] Label [icon].

Label

1Container — .tag. Inline-flex pill. Add colour + variant + size modifiers.
2Leading icon — Optional. Scales with the size modifier.
3Label — Required. 1–2 words. Always centred between icons.
4Trailing icon — Optional. Often a close/remove ×.
5Variant — .tag-filled / .tag-outline / .tag-semi. Controls bg/border treatment.

Default

The smallest possible Tag is a single <span class="tag tag-{color}"> with text inside. Default size is md (Body 3 typography, 4px vertical padding). Default variant is Filled.

Label Label Label Label

HTML

<span class="tag tag-blue">Label</span>
<span class="tag tag-green">Label</span>

Variants

Three visual treatments per color. Filled (default) — solid colored background with white text (yellow uses dark text). Outline — 10% tinted background with a colored border and colored text. Semi — same tint as Outline but no border, softer presence.

Filled Outline Semi

HTML

<span class="tag tag-blue">Filled</span>
<span class="tag tag-blue tag-outline">Outline</span>
<span class="tag tag-blue tag-semi">Semi</span>

Colors

Eight semantic colors. Blue / Green / Yellow / Red / Orange / Purple read as status (info, success, caution, danger, alert, notice). Grey and Black are neutral — use them for non-status metadata or category chips.

Blue Green Yellow Red Orange Purple Grey Black

Sizes

Four sizes. .tag-lg and default md share Body 3 (14/20) typography but differ in vertical padding. .tag-sm drops to Caption 1 (12/16) for compact toolbars and dense tables. .tag-xs drops to Caption 2 (10/12) for inline-with-caption text.

Large Medium Small X-Small

HTML

<span class="tag tag-blue tag-lg">Large</span>
<span class="tag tag-blue">Medium</span>
<span class="tag tag-blue tag-sm">Small</span>
<span class="tag tag-blue tag-xs">X-Small</span>

With icons

Optional leading and/or trailing icon slots. Wrap an inline SVG inside .tag-leading or .tag-trailing — the icon inherits the text color via currentColor and scales with the tag size.

Active Beta Pending Draft

HTML

<span class="tag tag-green">
  <span class="tag-leading"><svg>…</svg></span>
  Active
</span>

Full matrix

Every combination of color × variant — 8 × 3 = 24 cells, mirroring the Base-AI Figma reference (node 5296-8782). Each cell shows the canonical pattern: leading icon · label · trailing icon. Yellow is the only Filled tag with dark text; Grey and Black share neutral treatment.

Filled

Outline

Semi

Blue

Label

Red

Label

Green

Label

Yellow

Label

Orange

Label

Purple

Label

Grey

Label

Black

Label

Accessibility

Attribute / Behaviour	Value	Notes
Display-only tag	`<span>`	Non-interactive tags should be `<span>` elements — not buttons or links
Interactive/removable tag	`<button>`	If the tag can be clicked or removed, use a `<button>` so it's keyboard accessible
Remove button	`aria-label="Remove [tag name]"`	The × icon needs a descriptive label including the tag text
Colour-only status	Pair with text	Never use colour as the only indicator of status — always include a visible text label

API

Class	On	Description
.tag	<span>	Base class. Inline-flex container, `--radius-xxs` corners, Body 3 Semi Bold typography. Default size 28px (md), default variant Filled.
.tag-blue / -red / -green / -yellow / -orange / -purple / -grey / -black	.tag	Color modifier. Required — pick one per tag. Drives bg, text, and border color via the `--tag-{color}-*` token set.
.tag-outline	.tag	Outline variant — 10% tinted bg, colored 1px border, colored text.
.tag-semi	.tag	Semi variant — same tint as Outline, no border. Softer presence than Outline.
(no variant class)	.tag	Filled (default) — solid colored background, white text. Yellow uses dark text for contrast.
.tag-lg	.tag	Large — Body 3 (14/20) typography, 6px vertical padding. Use as a stand-alone status chip in cards/panels.
(no size class)	.tag	Medium (default) — Body 3 (14/20) typography, 4px vertical padding. Inline with body text.
.tag-sm	.tag	Small — Caption 1 (12/16) typography, tighter padding. Use in toolbars and dense rows.
.tag-xs	.tag	X-Small — Caption 2 (10/12) typography. Use inline with caption text.
.tag-leading	<span> inside .tag	Optional leading slot. Wrap an inline SVG; icon inherits `currentColor` and scales with the tag size (16/14/12/10 px).
.tag-trailing	<span> inside .tag	Optional trailing slot. Mirror of `.tag-leading`.