Dev Tools

TokenTag

Inline code badge for displaying design token names. Mono font on a neutral-soft fill with primary text color. Used across SemanticColorDemo, token tables, and documentation pages.

Import

import TokenTag from '../../components/utility/TokenTag.astro';

Props

PropTypeRequiredDescription
labelstringYesDisplay text — semantic name or primitive reference. Color swatch is auto-derived: light-/dark-/global- prefixes → primitive, otherwise → semantic
intent'neutral' | 'brand'NoVisual intent. neutral = neutral-soft fill, brand = brand-soft fill with brand-contrast text. Defaults to 'neutral'
swatchbooleanNoShow color swatch derived from label. Defaults to true
surface'default' | 'bold' | 'dark'NoSurface context — adapts colors for bold/dark backgrounds. Each component handles its own surface variant explicitly.

Preview

Semantic tokens

content-primary fill-element-brand-bold border-neutral

Primitive references

light-cool-grey-900 light-green-700 dark-cool-grey-100

Brand intent

content-brand light-green-600

Without swatch

content-primary content-brand

Surface: bold

content-on-bold-primary content-on-bold-secondary

Surface: dark

content-on-dark-primary content-on-dark-brand content-on-dark-brand-contrast
Page tokens