← All UI specs

Component contract

badge

Small chip for labeling type, state, or category.

Version
v1.0.0

Props

NameTypeValuesDefault
variantenumneutral, ui-component, recipe, agent, configneutral

Slot

Name
default
Purpose
badge label content

Tokens

font
family

Accessibility

native_element
span
role
none (decorative or content-derived)
notes
badge conveys categorical meaning via its label text; screen readers read the slot text. Consumers who need programmatic role semantics (e.g. status badges) should add role/aria via the host attribute.
Raw validated JSON
{
  "name": "badge",
  "version": "1.0.0",
  "props": {
    "variant": {
      "type": "enum",
      "values": [
        "neutral",
        "ui-component",
        "recipe",
        "agent",
        "config"
      ],
      "default": "neutral"
    }
  },
  "slot": {
    "name": "default",
    "purpose": "badge label content"
  },
  "tokens_used": {
    "font": [
      "family"
    ]
  },
  "a11y": {
    "native_element": "span",
    "role": "none (decorative or content-derived)",
    "notes": "badge conveys categorical meaning via its label text; screen readers read the slot text. Consumers who need programmatic role semantics (e.g. status badges) should add role/aria via the host attribute."
  }
}