Insignias

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

En esta página

Ejemplos

Las insignias se escalan para coincidir con el tamaño del elemento padre inmediato mediante el uso de tamaños de fuente relativos y unidades em. A partir de la versión 5, las insignias ya no tienen estilos de enfoque (focus) o de desplazamiento (hover) para los enlaces.

Encabezados

Ejemplo de encabezado Nuevo

html

<h1>Ejemplo de encabezado <span class="badge text-bg-secondary">Nuevo</span></h1>
<h2>Ejemplo de encabezado <span class="badge text-bg-secondary">Nuevo</span></h2>
<h3>Ejemplo de encabezado <span class="badge text-bg-secondary">Nuevo</span></h3>
<h4>Ejemplo de encabezado <span class="badge text-bg-secondary">Nuevo</span></h4>
<h5>Ejemplo de encabezado <span class="badge text-bg-secondary">Nuevo</span></h5>
<h6>Ejemplo de encabezado <span class="badge text-bg-secondary">Nuevo</span></h6>

Botones

Las insignias se pueden usar como parte de enlaces o botones para proporcionar un contador.

html

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

Ten en cuenta que, dependiendo de cómo se utilicen, las insignias pueden resultar confusas para los usuarios de lectores de pantalla y tecnologías de asistencia similares. Si bien el estilo de las insignias proporciona una pista visual sobre su propósito, a estos usuarios simplemente se les presentará el contenido de la insignia. Dependiendo de la situación específica, estas insignias pueden parecer palabras o números adicionales aleatorios al final de una oración, 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 fragmento de texto adicional visualmente oculto.

Posicionadas

Utiliza utilidades para modificar una .badge y colocarla en la esquina de un enlace o botón.

html

<button type="button" class="btn btn-primary position-relative">
  Bandeja de entrada
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">mensajes no leídos</span>
  </span>
</button>

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

html

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

Colores de fondo

Agregado en v5.2.0

Establece un background-color con un color de primer plano contrastante con nuestros ayudantes .text-bg-{color}. Anteriormente, era necesario emparejar manualmente la elección de las utilidades .text-{color} y .bg-{color} para el diseño, las cuales 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: El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como los lectores de pantalla. Asegúrate de que el significado sea obvio a partir del propio contenido (por ejemplo, el texto visible con un suficiente contraste de color) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Insignias de píldora

Utiliza la clase de utilidad .rounded-pill para hacer las insignias más redondeadas con un border-radius más grande.

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

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, las insignias ahora usan variables CSS locales en .badge para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es 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 de 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);