Componentes · Estado

Badge (etiquetas breves)

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.

Variantes

Base, purple, success, warning y danger.

Código + resultado

Ejemplo aplicado de Badge

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

<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>

Componente real

InformaciónV2ActivoPendienteError

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

Una o dos palabras

Mantén el contenido breve para conservar su función de etiqueta.

Estado reconocible

Prefiere términos estables como Activo, Pendiente o Error.

Sin interacción

Usa Button cuando el elemento deba ejecutar una acción.

Contraste legible

Comprueba el contraste en fondos distintos al blanco.