{
  "name": "badge",
  "title": {
    "es": "Badge",
    "en": "Badge"
  },
  "summary": {
    "es": "Etiqueta corta de estado, categoría o cantidad.",
    "en": "Short label for status, category or count."
  },
  "category": "data",
  "status": "stable",
  "nivel": "primitivos",
  "updated": "2026-09-29",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/badge/",
  "requires": [],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/badge/badge.html",
      "content": "<div class=\"c-badge-row\">\n  <span class=\"c-badge c-badge--primary\">Nuevo</span>\n  <span class=\"c-badge c-badge--secondary\">Borrador</span>\n  <span class=\"c-badge c-badge--outline\">v2.1</span>\n  <span class=\"c-badge c-badge--destructive\">Crítico</span>\n</div>\n<div class=\"c-badge-row\">\n  <span class=\"c-badge c-badge--success\"><span class=\"c-badge__dot\" aria-hidden=\"true\"></span>Pagado</span>\n  <span class=\"c-badge c-badge--warning\"><span class=\"c-badge__dot\" aria-hidden=\"true\"></span>Pendiente</span>\n  <span class=\"c-badge c-badge--error\"><span class=\"c-badge__dot\" aria-hidden=\"true\"></span>Vencido</span>\n  <span class=\"c-badge c-badge--info\"><span class=\"c-badge__dot\" aria-hidden=\"true\"></span>En revisión</span>\n  <span class=\"c-badge c-badge--primary\">12<span class=\"c-sr-only\"> sin leer</span></span>\n</div>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/badge/badge.css",
      "content": "/* badge · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde badge.tw.json. No editar a mano. Necesita tokens.css. */\n.c-badge{position:relative;display:inline-flex}\n.c-badge__dot{width:calc(var(--spacing)*1.5);height:calc(var(--spacing)*1.5)}\n.c-badge{height:calc(var(--spacing)*5.5)}\n.c-badge--lg{height:calc(var(--spacing)*6.5)}\n.c-badge{min-width:calc(var(--spacing)*5.5)}\n.c-badge--lg{min-width:calc(var(--spacing)*6.5)}\n.c-badge{flex-shrink:0;align-items:center;justify-content:center;gap:calc(var(--spacing)*1)}\n.c-badge__dot{border-radius:3.40282e38px}\n.c-badge{border-radius:calc(var(--radius) - 4px);border-style:var(--tw-border-style);border-width:1px}\n.c-badge--outline{border-color:var(--input)}\n.c-badge{border-color:#0000}\n.c-badge--outline{background-color:var(--background)}\n.c-badge--destructive{background-color:var(--destructive)}\n.c-badge--error{background-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-badge--error{background-color:color-mix(in oklab,var(--destructive)8%,transparent)}\n}\n.c-badge--info{background-color:var(--info)}\n@supports (color:color-mix(in lab, red, red)){\n.c-badge--info{background-color:color-mix(in oklab,var(--info)8%,transparent)}\n}\n.c-badge--primary{background-color:var(--primary)}\n.c-badge--secondary{background-color:var(--secondary)}\n.c-badge--success{background-color:var(--success)}\n@supports (color:color-mix(in lab, red, red)){\n.c-badge--success{background-color:color-mix(in oklab,var(--success)8%,transparent)}\n}\n.c-badge--warning{background-color:var(--warning)}\n@supports (color:color-mix(in lab, red, red)){\n.c-badge--warning{background-color:color-mix(in oklab,var(--warning)8%,transparent)}\n}\n.c-badge{padding-inline:calc(calc(var(--spacing)*1) - 1px)}\n.c-badge--lg{padding-inline:calc(calc(var(--spacing)*1.5) - 1px);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}\n.c-badge{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap}\n.c-badge--error{color:var(--destructive-foreground)}\n.c-badge--outline{color:var(--foreground)}\n.c-badge--info{color:var(--info-foreground)}\n.c-badge--primary{color:var(--primary-foreground)}\n.c-badge--secondary{color:var(--secondary-foreground)}\n.c-badge--success{color:var(--success-foreground)}\n.c-badge--warning{color:var(--warning-foreground)}\n.c-badge--destructive{color:var(--color-white)}\n.c-badge{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-outline-style:none;outline-style:none}\n@media (min-width:40rem){\n.c-badge{height:calc(var(--spacing)*4.5)}\n.c-badge--lg{height:calc(var(--spacing)*5.5)}\n.c-badge{min-width:calc(var(--spacing)*4.5)}\n.c-badge--lg{min-width:calc(var(--spacing)*5.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}\n.c-badge{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}\n}\n.c-badge--error:is(.dark *){background-color:var(--destructive)}\n@supports (color:color-mix(in lab, red, red)){\n.c-badge--error:is(.dark *){background-color:color-mix(in oklab,var(--destructive)16%,transparent)}\n}\n.c-badge--info:is(.dark *){background-color:var(--info)}\n@supports (color:color-mix(in lab, red, red)){\n.c-badge--info:is(.dark *){background-color:color-mix(in oklab,var(--info)16%,transparent)}\n}\n.c-badge--outline:is(.dark *){background-color:var(--input)}\n@supports (color:color-mix(in lab, red, red)){\n.c-badge--outline:is(.dark *){background-color:color-mix(in oklab,var(--input)32%,transparent)}\n}\n.c-badge--success:is(.dark *){background-color:var(--success)}\n@supports (color:color-mix(in lab, red, red)){\n.c-badge--success:is(.dark *){background-color:color-mix(in oklab,var(--success)16%,transparent)}\n}\n.c-badge--warning:is(.dark *){background-color:var(--warning)}\n@supports (color:color-mix(in lab, red, red)){\n.c-badge--warning:is(.dark *){background-color:color-mix(in oklab,var(--warning)16%,transparent)}\n}\n.c-badge svg{pointer-events:none;flex-shrink:0}\n.c-badge svg:not([class*=opacity-]){opacity:.8}\n.c-badge svg:not([class*=size-]){width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}\n@media (min-width:40rem){\n.c-badge svg:not([class*=size-]){width:calc(var(--spacing)*3);height:calc(var(--spacing)*3)}\n}\n/* propio */\n.c-badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}\n.c-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n.c-badge__dot{background-color:currentColor}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/badge.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "ambos",
  "densidad": "baja",
  "tono": "sobria",
  "states": [
    "rest"
  ],
  "use": {
    "es": [
      "Para el estado de un elemento en una tabla o lista."
    ],
    "en": [
      "For an item's status in a table or list."
    ]
  },
  "avoid": {
    "es": [
      "Como botón: no se puede pulsar."
    ],
    "en": [
      "As a button: it can't be pressed."
    ]
  },
  "a11y": {
    "roles": [
      "(texto)"
    ],
    "keyboard": [],
    "notes": {
      "es": [
        "Es texto: el estado se lee sin depender del color.",
        "El contador agrega «sin leer» en texto oculto."
      ],
      "en": [
        "It is text: status reads without relying on color.",
        "The counter adds “unread” as hidden text."
      ]
    },
    "test": {
      "es": [
        "En escala de grises, cada estado se sigue entendiendo."
      ],
      "en": [
        "In grayscale, every status still reads."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "coss ui (MIT) · badge.tsx",
      "url": "https://coss.com/ui"
    }
  ],
  "changes": [
    {
      "date": "2026-09-29",
      "es": "Diseño de coss ui en HTML, CSS y JS sin dependencias",
      "en": "coss ui design in dependency-free HTML, CSS and JS"
    }
  ],
  "partes": [],
  "pieza": "https://componentes-lovat.vercel.app/r/badge.html"
}