# Badge / Badge

> Short label for status, category or count.

Page: https://componentes-lovat.vercel.app/c/badge/  
License: MIT · Design: coss ui (MIT) · badge.tsx  
Requires: tokens.css  
Context: ambos · Density: baja · Tone: sobria

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- HTML: https://componentes-lovat.vercel.app/raw/badge/badge.html
- CSS: https://componentes-lovat.vercel.app/raw/badge/badge.css
- Everything in one file: https://componentes-lovat.vercel.app/r/badge.html

Dark theme: add class `dark` to `<html>`.

## When to use

- For an item's status in a table or list.

## When not to use

- As a button: it can't be pressed.

## Accessibility

Roles: (texto)

- It is text: status reads without relying on color.
- The counter adds “unread” as hidden text.

## Code

```html
<div class="c-badge-row">
  <span class="c-badge c-badge--primary">Nuevo</span>
  <span class="c-badge c-badge--secondary">Borrador</span>
  <span class="c-badge c-badge--outline">v2.1</span>
  <span class="c-badge c-badge--destructive">Crítico</span>
</div>
<div class="c-badge-row">
  <span class="c-badge c-badge--success"><span class="c-badge__dot" aria-hidden="true"></span>Pagado</span>
  <span class="c-badge c-badge--warning"><span class="c-badge__dot" aria-hidden="true"></span>Pendiente</span>
  <span class="c-badge c-badge--error"><span class="c-badge__dot" aria-hidden="true"></span>Vencido</span>
  <span class="c-badge c-badge--info"><span class="c-badge__dot" aria-hidden="true"></span>En revisión</span>
  <span class="c-badge c-badge--primary">12<span class="c-sr-only"> sin leer</span></span>
</div>
```

```css
/* badge · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde badge.tw.json. No editar a mano. Necesita tokens.css. */
.c-badge{position:relative;display:inline-flex}
.c-badge__dot{width:calc(var(--spacing)*1.5);height:calc(var(--spacing)*1.5)}
.c-badge{height:calc(var(--spacing)*5.5)}
.c-badge--lg{height:calc(var(--spacing)*6.5)}
.c-badge{min-width:calc(var(--spacing)*5.5)}
.c-badge--lg{min-width:calc(var(--spacing)*6.5)}
.c-badge{flex-shrink:0;align-items:center;justify-content:center;gap:calc(var(--spacing)*1)}
.c-badge__dot{border-radius:3.40282e38px}
.c-badge{border-radius:calc(var(--radius) - 4px);border-style:var(--tw-border-style);border-width:1px}
.c-badge--outline{border-color:var(--input)}
.c-badge{border-color:#0000}
.c-badge--outline{background-color:var(--background)}
.c-badge--destructive{background-color:var(--destructive)}
.c-badge--error{background-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-badge--error{background-color:color-mix(in oklab,var(--destructive)8%,transparent)}
}
.c-badge--info{background-color:var(--info)}
@supports (color:color-mix(in lab, red, red)){
.c-badge--info{background-color:color-mix(in oklab,var(--info)8%,transparent)}
}
.c-badge--primary{background-color:var(--primary)}
.c-badge--secondary{background-color:var(--secondary)}
.c-badge--success{background-color:var(--success)}
@supports (color:color-mix(in lab, red, red)){
.c-badge--success{background-color:color-mix(in oklab,var(--success)8%,transparent)}
}
.c-badge--warning{background-color:var(--warning)}
@supports (color:color-mix(in lab, red, red)){
.c-badge--warning{background-color:color-mix(in oklab,var(--warning)8%,transparent)}
}
.c-badge{padding-inline:calc(calc(var(--spacing)*1) - 1px)}
.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))}
.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}
.c-badge--error{color:var(--destructive-foreground)}
.c-badge--outline{color:var(--foreground)}
.c-badge--info{color:var(--info-foreground)}
.c-badge--primary{color:var(--primary-foreground)}
.c-badge--secondary{color:var(--secondary-foreground)}
.c-badge--success{color:var(--success-foreground)}
.c-badge--warning{color:var(--warning-foreground)}
.c-badge--destructive{color:var(--color-white)}
.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}
@media (min-width:40rem){
.c-badge{height:calc(var(--spacing)*4.5)}
.c-badge--lg{height:calc(var(--spacing)*5.5)}
.c-badge{min-width:calc(var(--spacing)*4.5)}
.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))}
.c-badge{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}
}
.c-badge--error:is(.dark *){background-color:var(--destructive)}
@supports (color:color-mix(in lab, red, red)){
.c-badge--error:is(.dark *){background-color:color-mix(in oklab,var(--destructive)16%,transparent)}
}
.c-badge--info:is(.dark *){background-color:var(--info)}
@supports (color:color-mix(in lab, red, red)){
.c-badge--info:is(.dark *){background-color:color-mix(in oklab,var(--info)16%,transparent)}
}
.c-badge--outline:is(.dark *){background-color:var(--input)}
@supports (color:color-mix(in lab, red, red)){
.c-badge--outline:is(.dark *){background-color:color-mix(in oklab,var(--input)32%,transparent)}
}
.c-badge--success:is(.dark *){background-color:var(--success)}
@supports (color:color-mix(in lab, red, red)){
.c-badge--success:is(.dark *){background-color:color-mix(in oklab,var(--success)16%,transparent)}
}
.c-badge--warning:is(.dark *){background-color:var(--warning)}
@supports (color:color-mix(in lab, red, red)){
.c-badge--warning:is(.dark *){background-color:color-mix(in oklab,var(--warning)16%,transparent)}
}
.c-badge svg{pointer-events:none;flex-shrink:0}
.c-badge svg:not([class*=opacity-]){opacity:.8}
.c-badge svg:not([class*=size-]){width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}
@media (min-width:40rem){
.c-badge svg:not([class*=size-]){width:calc(var(--spacing)*3);height:calc(var(--spacing)*3)}
}
/* propio */
.c-badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.c-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.c-badge__dot{background-color:currentColor}
```

## Credits

- coss ui (MIT) · badge.tsx: https://coss.com/ui