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

html

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

Botones

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

Posicionadas

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

html

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

html

<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

Añadido en v5.2.0

Establece un background-color con un color de primer plano contrastante con nuestros helpers .text-bg-{color}. Anteriormente se requería emparejar manualmente tu elección de las utilidades .text-{color} y .bg-{color} para aplicar estilos, que aún puedes usar si lo prefieres.

Primary Secondary Success Danger Warning Info Light Dark

html

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

Consejo de accesibilidad: Usar color para añadir significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como lectores de pantalla. Asegúrate de que el significado sea obvio por el contenido mismo (p. ej., el texto visible con un suficiente contraste de color) o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Insignias en forma de 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

html

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

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque evolutivo de variables CSS de Bootstrap, las insignias ahora usan variables CSS locales en .badge para una personalización en tiempo real mejorada. Los valores de las variables CSS se establecen vía Sass, por lo que la personalización con Sass también sigue siendo compatible.

scss/_badge.scss

--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};

Variables Sass

scss/_variables.scss

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               var(--#{$prefix}border-radius);