Tag

• Layer: Component
• Base: Custom (no Kobalte equivalent needed)

Pill-shaped. Uses --font-mono for the system-speaking register. The base recipe applies text-transform: uppercase and letter-spacing: 0.14em so every Tag renders in the mono UPPERCASE register described in the brief (audit Section I drift fix).

Variants

All variants

confluencearchivedoverdue

Variant	Use
default	Plain metadata. Mono UPPERCASE on --colors-bg-dim.
accent	Verified / live / accented metadata. Cyan on --colors-accent-dim.
phenomenon	Plane-2 phenomenon callouts. Coloured by --colors-glory.
danger	Retained for backwards compatibility; review per audit Section I.

Variants (extended)

default · accent · accent+dot · phenomenon+dot · default

0471b3verifiedlive · 00:12rare phenomenonarchived · 2024-11

The optional dot prop renders a glowing 6 px disc before the label, colour-matched to the variant’s currentColor. Use it for live / in-progress / phenomenon states where the tag should feel “lit”.

Dismissable (chip mode)

With onDismiss

aurora · greenaurora · violet

Passing onDismiss turns the Tag into a dismissable chip — a tiny × button appears on the right, with keyboard focus and an aria-label="Remove".

Sizes

Size comparison

smallmediumsmall defaultmedium default

Size	Padding	Use
sm	6px x 2px	Compact lists, inline metadata
md	8px x 4px	Default

Dismissible tags (interactive)

Click the × to dismiss

jiraconfluenceslacknotes

Props

Prop	Type	Default	Description
variant	'default' | 'accent' | 'phenomenon' | 'danger'	'default'	Visual variant
size	'sm' | 'md'	'md'	Tag size
dot	boolean	false	Render a glowing status disc before the label
onDismiss	() => void	—	Makes tag dismissible; renders close button
children	JSX.Element	required	Tag content

Accessibility

• Dismiss button has aria-label="Remove"
• Focus ring on dismiss button via :focus-visible
• Decorative dot is aria-hidden

Token Dependencies

Token	Where
--colors-bg-dim	default variant fill
--colors-text-secondary	default variant label
--colors-bg-emphasized	default variant hover fill
--colors-accent-dim	accent variant fill
--colors-accent	accent variant label + hover fill (via --colors-accent-glow)
--colors-glory	phenomenon variant label (Plane-2 accent)
--colors-error	danger variant label
--colors-error-dim	danger variant fill
--radii-pill	All variants
--fonts-mono	Label typeface
--shadows-focus	Focus ring (dismiss button + pill itself via :focus-visible)