Badges

Badges básicos y estilos de color

Los badges son pequeños elementos visuales diseñados para mostrar información complementaria como contadores, etiquetas de estado, categorías o notificaciones. Funcionan como indicadores discretos que enriquecen el contenido sin interrumpir el flujo visual principal de la página.

Bootstrap proporciona la clase fundamental .badge que transforma cualquier elemento en un indicador compacto y estilizado. Los badges se caracterizan por su tamaño reducido, bordes redondeados y tipografía ajustada que los hace perfectos para mostrar información secundaria de forma clara y concisa.

Creación de badges básicos

Para crear un badge, simplemente aplica la clase .badge junto con una de las clases de color que ya conoces del sistema de utilidades de Bootstrap:

<span class="badge bg-primary">Nuevo</span>
<span class="badge bg-secondary">Agotado</span>
<span class="badge bg-success">Disponible</span>

La estructura es extremadamente simple: un elemento <span> con la clase .badge y una clase de color de fondo. Los badges heredan automáticamente el tamaño de fuente del elemento padre, adaptándose de forma natural al contexto donde se ubican.

Aplicación del sistema de colores

Los badges utilizan el mismo sistema de colores que has aprendido en las utilidades básicas. Cada color transmite un significado semántico específico que mejora la comunicación visual:

<!-- Estados básicos -->
<span class="badge bg-primary">Principal</span>
<span class="badge bg-secondary">Secundario</span>
<span class="badge bg-light text-dark">Claro</span>
<span class="badge bg-dark">Oscuro</span>

<!-- Estados semánticos -->
<span class="badge bg-success">Completado</span>
<span class="badge bg-danger">Urgente</span>
<span class="badge bg-warning text-dark">Pendiente</span>
<span class="badge bg-info">Información</span>

Observa cómo se utiliza text-dark en badges con fondos claros para mantener el contraste y garantizar la legibilidad del texto.

Casos de uso prácticos

Los badges encuentran su aplicación natural en múltiples contextos cotidianos. En sistemas de notificaciones, indican la cantidad de mensajes pendientes:

<h4>
  Mensajes 
  <span class="badge bg-danger">5</span>
</h4>

Para categorización de contenido, proporcionan identificación visual rápida:

<div class="card">
  <div class="card-body">
    <span class="badge bg-info me-2">Tecnología</span>
    <span class="badge bg-warning text-dark">Tutorial</span>
    <h5 class="card-title mt-2">Introducción a Bootstrap</h5>
  </div>
</div>

En indicadores de estado, comunican información importante sobre procesos o elementos:

<!-- Estado de productos -->
<div class="list-group-item">
  <div class="d-flex justify-content-between align-items-center">
    <span>MacBook Pro 14"</span>
    <span class="badge bg-success">En stock</span>
  </div>
</div>

<div class="list-group-item">
  <div class="d-flex justify-content-between align-items-center">
    <span>iPhone 15</span>
    <span class="badge bg-danger">Agotado</span>
  </div>
</div>

Integración con tipografía

Los badges se adaptan automáticamente al tamaño del texto circundante, manteniendo proporciones apropiadas en diferentes contextos:

<h1>Título principal <span class="badge bg-secondary">Nuevo</span></h1>
<h3>Subtítulo <span class="badge bg-primary">2024</span></h3>
<p>Texto normal <span class="badge bg-success">Verificado</span></p>
<small>Texto pequeño <span class="badge bg-info">Beta</span></small>

Esta característica permite utilizar badges de forma consistente en cualquier elemento tipográfico sin necesidad de ajustes manuales de tamaño, manteniendo la armonía visual en toda la interfaz.

Variaciones de forma y posicionamiento

Bootstrap ofrece variaciones específicas en la forma de los badges que permiten adaptarlos a diferentes necesidades de diseño y contextos visuales. Estas variaciones, combinadas con técnicas de posicionamiento, proporcionan flexibilidad para crear interfaces más sofisticadas y visualmente atractivas.

Badges pill (forma redondeada)

Los badges pill representan la variación más distintiva en cuanto a forma, utilizando la clase .rounded-pill para crear elementos completamente redondeados. Esta variación es especialmente efectiva para contadores, etiquetas de estado y elementos que requieren un aspecto más suave y moderno:

<span class="badge bg-primary rounded-pill">12</span>
<span class="badge bg-success rounded-pill">Activo</span>
<span class="badge bg-danger rounded-pill">99+</span>

La forma completamente circular de los badges pill los convierte en la opción ideal para mostrar números o estados breves, ya que su diseño llama la atención sin resultar intrusivo.

Comparación visual de formas

La diferencia entre badges rectangulares y pill se aprecia claramente en contextos similares:

<!-- Badges rectangulares (por defecto) -->
<h5>Notificaciones <span class="badge bg-danger">5</span></h5>
<h5>Mensajes <span class="badge bg-primary">New</span></h5>

<!-- Badges pill -->
<h5>Notificaciones <span class="badge bg-danger rounded-pill">5</span></h5>
<h5>Mensajes <span class="badge bg-primary rounded-pill">New</span></h5>

Los badges pill resultan especialmente apropiados para contadores numéricos y estados simples, mientras que los rectangulares funcionan mejor para texto descriptivo más extenso.

Posicionamiento en botones

Una aplicación común de los badges es su integración con botones para mostrar información adicional como contadores o estados. El posicionamiento se logra combinando badges con las utilidades de espaciado que ya dominas:

<button type="button" class="btn btn-primary">
  Inbox <span class="badge bg-light text-dark ms-1">4</span>
</button>

<button type="button" class="btn btn-secondary">
  Profile <span class="badge bg-danger ms-1">!</span>
</button>

<button type="button" class="btn btn-outline-primary">
  Notifications <span class="badge bg-primary ms-2">12</span>
</button>

La clase ms-1 o ms-2 proporciona separación visual apropiada entre el texto del botón y el badge, manteniendo la legibilidad y el equilibrio visual.

Posicionamiento con elementos de texto

Los badges se integran naturalmente en títulos y párrafos, adaptándose al flujo del contenido. El posicionamiento se controla mediante utilidades de espaciado y alineación:

<h2>
  Dashboard 
  <span class="badge bg-secondary rounded-pill ms-2">Beta</span>
</h2>

<h4 class="d-flex align-items-center">
  Proyectos activos
  <span class="badge bg-success ms-2">3</span>
</h4>

<p class="mb-1">
  Estado del servidor
  <span class="badge bg-warning text-dark ms-1">Mantenimiento</span>
</p>

La utilidad d-flex align-items-center garantiza que los badges se alineen correctamente con el texto, especialmente útil en títulos de diferentes tamaños.

Posicionamiento absoluto para notificaciones

Para crear indicadores de notificación que se superponen a otros elementos, utiliza las utilidades de posicionamiento junto con badges pill:

<div class="position-relative d-inline-block">
  <button class="btn btn-outline-primary">
    <i class="bi bi-bell"></i>
  </button>
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    9
  </span>
</div>

<div class="position-relative d-inline-block">
  <img src="avatar.jpg" alt="Usuario" class="rounded-circle" width="40" height="40">
  <span class="position-absolute top-0 start-100 translate-middle p-1 bg-success rounded-circle">
    <span class="visually-hidden">Usuario en línea</span>
  </span>
</div>

Esta técnica crea indicadores flotantes que se posicionan de forma precisa sobre el elemento padre, muy común en interfaces de aplicaciones modernas.

Agrupación y alineación de badges

Cuando necesitas mostrar múltiples badges relacionados, las utilidades de espaciado y flexbox facilitan su organización:

<div class="d-flex gap-2 mb-3">
  <span class="badge bg-primary">HTML</span>
  <span class="badge bg-success">CSS</span>
  <span class="badge bg-info">JavaScript</span>
</div>

<div class="text-center">
  <span class="badge bg-warning text-dark me-1">Pendiente</span>
  <span class="badge bg-success me-1">Completado</span>
  <span class="badge bg-danger">Cancelado</span>
</div>

La clase gap-2 proporciona espaciado uniforme entre elementos, mientras que las utilidades de alineación de texto controlan la posición del conjunto completo.

Casos prácticos de posicionamiento

En listados de elementos, los badges pill funcionan especialmente bien para mostrar contadores o estados:

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Carpeta de trabajo
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Archivos temporales
    <span class="badge bg-secondary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Papelera
    <span class="badge bg-danger rounded-pill">7</span>
  </li>
</ul>

Esta combinación de flexbox con badges pill crea interfaces limpias y profesionales, donde la información numérica se presenta de forma destacada pero no intrusiva.

Badges con botones y elementos de texto

Los badges adquieren mayor versatilidad cuando se combinan de forma estratégica con botones y elementos de texto complejos, creando interfaces más ricas e informativas. Esta integración permite construir componentes híbridos que comunican múltiples capas de información de forma clara y accesible.

Badges en grupos de botones

Los grupos de botones que ya dominas se enriquecen significativamente al incorporar badges que muestran información contextual o contadores. Esta combinación es especialmente útil en interfaces de administración y dashboards:

<div class="btn-group" role="group">
  <button type="button" class="btn btn-outline-primary">
    Activos <span class="badge bg-success ms-1">23</span>
  </button>
  <button type="button" class="btn btn-outline-primary">
    Pendientes <span class="badge bg-warning text-dark ms-1">5</span>
  </button>
  <button type="button" class="btn btn-outline-primary">
    Completados <span class="badge bg-secondary ms-1">127</span>
  </button>
</div>

En toolbars de botones, los badges proporcionan información de estado sin necesidad de texto adicional:

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2">
    <button type="button" class="btn btn-primary">
      Inbox <span class="badge bg-light text-primary ms-1">12</span>
    </button>
    <button type="button" class="btn btn-outline-primary">
      Sent <span class="badge bg-primary ms-1">3</span>
    </button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-outline-danger">
      Spam <span class="badge bg-danger ms-1">!!</span>
    </button>
  </div>
</div>

Botones con múltiples badges

Para información más compleja, los botones pueden incorporar varios badges que muestren diferentes métricas o estados simultáneamente:

<button type="button" class="btn btn-lg btn-outline-info">
  Proyecto Alpha
  <span class="badge bg-success ms-2">5 completadas</span>
  <span class="badge bg-warning text-dark ms-1">2 pendientes</span>
</button>

<button type="button" class="btn btn-primary">
  Dashboard
  <span class="badge bg-danger ms-2 rounded-pill">3</span>
  <span class="badge bg-light text-primary ms-1">Online</span>
</button>

La combinación de formas (rectangular y pill) en el mismo botón permite diferenciar visualmente el tipo de información que cada badge representa.

Badges interactivos en botones

Los badges pueden actuar como elementos pseudo-interactivos dentro de botones, creando la sensación de controles múltiples sin necesidad de JavaScript complejo:

<div class="d-flex gap-2">
  <button type="button" class="btn btn-outline-secondary">
    Filtrar por categoría
    <span class="badge bg-primary ms-2">Tecnología</span>
  </button>
  <button type="button" class="btn btn-outline-secondary">
    Ordenar por fecha
    <span class="badge bg-success ms-2">Reciente</span>
  </button>
</div>

Integración con elementos de texto complejos

Los badges se integran de forma natural en estructuras de texto más elaboradas, como definiciones, citas y contenido estructurado:

<dl class="row">
  <dt class="col-sm-3">Estado del sistema</dt>
  <dd class="col-sm-9">
    Operativo <span class="badge bg-success ms-1">99.9%</span>
  </dd>
  
  <dt class="col-sm-3">Usuarios conectados</dt>
  <dd class="col-sm-9">
    <span class="badge bg-info rounded-pill me-1">1,247</span> activos
    <span class="badge bg-secondary rounded-pill ms-2">23</span> administradores
  </dd>
</dl>

En citas y testimonios, los badges añaden credibilidad y contexto:

<blockquote class="blockquote">
  <p>"Bootstrap ha revolucionado nuestro proceso de desarrollo"</p>
  <footer class="blockquote-footer">
    María González
    <span class="badge bg-primary ms-2">Desarrolladora Senior</span>
    <span class="badge bg-outline-secondary ms-1">5 años experiencia</span>
  </footer>
</blockquote>

Badges en elementos de navegación con texto

La combinación de badges con enlaces y elementos de navegación crea menús informativos que comunican estado y cantidad simultáneamente:

<nav class="nav flex-column">
  <a class="nav-link d-flex justify-content-between align-items-center" href="#">
    <span>Panel principal</span>
    <span class="badge bg-primary rounded-pill">2</span>
  </a>
  <a class="nav-link d-flex justify-content-between align-items-center" href="#">
    <span>Configuración del perfil</span>
    <span class="badge bg-warning text-dark">Incompleto</span>
  </a>
  <a class="nav-link d-flex justify-content-between align-items-center" href="#">
    <span>Mensajes</span>
    <span class="badge bg-danger rounded-pill">!</span>
  </a>
</nav>

Elementos de texto con badges de estado temporal

Para contenido dinámico que cambia con el tiempo, los badges proporcionan información de estado contextual:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">
      Mantenimiento programado
      <span class="badge bg-warning text-dark ms-2">En 2 horas</span>
    </h5>
    <p class="card-text">
      El sistema estará fuera de servicio temporalmente.
      <span class="badge bg-info ms-1">Duración estimada: 30min</span>
    </p>
    <div class="d-flex gap-2">
      <button class="btn btn-primary">
        Recibir notificación
        <span class="badge bg-light text-primary ms-1">SMS</span>
      </button>
      <button class="btn btn-outline-primary">
        Más información
        <span class="badge bg-success ms-1">Disponible 24/7</span>
      </button>
    </div>
  </div>
</div>

Patrones avanzados de combinación

Para interfaces profesionales, la combinación estratégica de badges con diferentes elementos crea jerarquías visuales claras:

<div class="list-group">
  <div class="list-group-item">
    <div class="d-flex w-100 justify-content-between align-items-center mb-2">
      <h6 class="mb-0">Actualización de seguridad</h6>
      <div>
        <span class="badge bg-danger me-1">Crítico</span>
        <span class="badge bg-secondary rounded-pill">v2.1.3</span>
      </div>
    </div>
    <p class="mb-2">Corrección de vulnerabilidades identificadas en el sistema de autenticación.</p>
    <div class="d-flex gap-2">
      <button class="btn btn-sm btn-primary">
        Instalar ahora
        <span class="badge bg-light text-primary ms-1">15min</span>
      </button>
      <button class="btn btn-sm btn-outline-secondary">
        Programar
        <span class="badge bg-warning text-dark ms-1">Mañana</span>
      </button>
    </div>
  </div>
</div>

Esta integración multicapa de badges con títulos, texto descriptivo y botones de acción crea interfaces que comunican información compleja de forma organizada y visualmente atractiva, aprovechando al máximo las capacidades expresivas de los badges sin comprometer la claridad del contenido.