← Todos los specs UI

Contrato del componente

badge

Chip pequeño para etiquetar tipo, estado o categoría.

Versión
v1.0.0

Props

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

Slot

Nombre
default
Propósito
badge label content

Tokens

font
family

Accesibilidad

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.
JSON validado original
{
  "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."
  }
}