Badge, tags y chips

Los badge, tags y chips son elementos de interfaz utilizados para mostrar información breve, clasificar contenido o representar estados dentro de la interfaz. Aunque visualmente pueden ser similares, cada uno cumple una función diferente dentro del sistema.

Badge

Su función principal es indicar cantidad o alerta. Se utiliza para mostrar conteos, notificaciones o estados rápidos asociados a otro elemento de la interfaz.

Badge-number
  • Tamaño compacto.
  • Contiene números o indicadores cortos.
  • Se muestra asociado a otro componente (iconos, botones, tabs, etc.).
  • Su función principal es indicar cantidad o alerta.

Tamaños

Badge-size
  1. S
  2. M
  3. L
  4. XL

Estados

Badge state
  1. Primary: Usados con el color primario del producto
  2. Danger
  3. Warning
  4. Info
  5. Success

Tags

Se utilizan para clasificar, categorizar o etiquetar información.

  • Representa categorías o atributos.
  • No necesariamente tiene interacción.
  • Generalmente contiene texto corto.

Anatomía

  1. Icono
  2. Texto
  3. Rounded corner
  4. Rectangular corner

Estados

Tag state
  1. Primary: Usados con el color primario del producto
  2. Danger
  3. Warning
  4. Info
  5. Success

Chips

Es un elemento interactivo, utilizado para representar selecciones, filtros o entidades dentro de la interfaz.

Chip
  • Puede incluir iconos.
  • Puede ser removible.
  • Se usa comúnmente en filtros o selección múltiple.
  • Permite interacción del usuario.

Anatomía

  1. Icono
  2. Texto
  3. Icono cerrar
  4. Rectangular corner

Diferencia entre badge, tag y chip

Elemento Propósito Interacción
Badge
Mostrar conteos o notificaciones
No interactivo
Tag
Clasificar o etiquetar contenido
Generalmente no interactivo
Chip
Representar selecciones o filtros
Interactivo
Badge, tags y chips - PreviousProgress barNext - Badge, tags y chipsUsos y normas de las tablas
Contenidos

Copyright © 2026 Quipux. Todos los derechos reservados