# Badge (etiquetas breves)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-badge.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Estado

Añade estados, categorías o metadatos compactos junto a títulos, filas y controles.

v2.0

●
## Lectura rápida
Resume un estado en pocas palabras.

↔
## Contenido flexible
Acepta texto e iconos pequeños sin fijar un ancho.

5
## Variantes
Base, purple, success, warning y danger.

i
## Contenido compacto
Una insignia complementa el contenido principal; no debe reemplazar títulos, botones ni explicaciones necesarias.

Código + resultado

## Ejemplo aplicado de Badge
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.

HTML

```html
<div class="display-flex g-8 flex-center">
  <span class="q-badge rounded-p">
    Información
  </span>
  <span class="q-badge rounded-p q-badge--purple">
    V2
  </span>
  <span class="q-badge rounded-p q-badge--success">
    Activo
  </span>
  <span class="q-badge rounded-p q-badge--warning">
    Pendiente
  </span>
  <span class="q-badge rounded-p q-badge--danger">
    Error
  </span>
</div>
```

Resultado aplicado   Badge · estados semánticos

Componente real
Información  V2  Activo  Pendiente  Error

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

## Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

| Clase o atributo | Función | Uso recomendado |
| --- | --- | --- |
| .q-badge | Etiqueta base | Presenta información breve. |
| .q-badge--purple | Identidad | Variante violeta. |
| .q-badge--success | Éxito | Estado positivo. |
| .q-badge--warning | Advertencia | Estado pendiente. |
| .q-badge--danger | Peligro | Error o estado crítico. |
| .display-flex | Layout auxiliar | Distribuye las insignias en una fila flexible. |
| .flex-center | Alineación | Centra la colección dentro del área de resultado. |
| .g-8 | Separación | Aplica 8px entre insignias. |
| .bc-{token} | Color de acento | Sincroniza texto y fondo suave de la etiqueta. |
| .rounded-p | Forma de píldora | Aplica el redondeado como utilidad independiente. |

Recomendaciones

## Buenas prácticas de Badge

01
### Una o dos palabras
Mantén el contenido breve para conservar su función de etiqueta.

02
### Estado reconocible
Prefiere términos estables como Activo, Pendiente o Error.

03
### Sin interacción
Usa Button cuando el elemento deba ejecutar una acción.

04
### Contraste legible
Comprueba el contraste en fondos distintos al blanco.