Badges

Documentación y ejemplos para badges, nuestro pequeño componente de conteo y etiquetado.

On this page

Ejemplos

Los badges escalan para coincidir con el tamaño del elemento padre inmediato usando tamaños de fuente relativos y unidades em. A partir de v5, los badges ya no tienen estilos de foco ni hover para enlaces.

Encabezados

Encabezado de ejemplo Nuevo

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

Botones

Los badges pueden usarse como parte de enlaces o botones para proporcionar un contador.

<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

Ten en cuenta que dependiendo de cómo se usen, los badges pueden ser confusos para los usuarios de lectores de pantalla y tecnologías asistivas similares. Aunque el estilo de los badges proporciona una señal visual sobre su propósito, estos usuarios simplemente verán el contenido del badge. Dependiendo de la situación específica, estos badges pueden parecer palabras o números adicionales aleatorios al final de una frase, enlace o botón.

A menos que el contexto sea claro (como en el ejemplo de "Notificaciones", donde se entiende que el "4" es el número de notificaciones), considera incluir contexto adicional con un texto adicional oculto visualmente.

Posicionados

Usa utilidades para modificar un .badge y posicionarlo en la esquina de un enlace o botón.

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

También puedes reemplazar la clase .badge con algunas utilidades más sin un contador para un indicador más genérico.

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Colores de fondo

Usa nuestras clases utilitarias de fondo para cambiar rápidamente la apariencia de un badge. Ten en cuenta que cuando usas .bg-light por defecto de Bootstrap, probablemente necesites una utilidad de color de texto como .text-dark para un estilo adecuado. Esto se debe a que las utilidades de fondo no establecen nada más que background-color.

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

Transmisión de significado a tecnologías asistivas

Usar color para añadir significado solo proporciona una indicación visual, que no será transmitida a los usuarios de tecnologías asistivas – como los lectores de pantalla. Asegúrate de que la información denotada por el color sea evidente desde el contenido mismo (ej. el texto visible), o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Badges tipo píldora

Usa la clase utilitaria .rounded-pill para hacer los badges más redondeados con un border-radius mayor.

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

Sass

Variables

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;