Skip to main content Skip to docs navigation
En GitHub

Badges

Documentación y ejemplos para insignias, nuestro pequeño componente 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 v5, las insignias ya no tienen estilos de focus o de hover para los enlaces.

Encabezados

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo
Encabezado de ejemplo Nuevo
<h1>Encabezado de ejemplo <span class="badge bg-secondary">Nuevo</span></h1>
<h2>Encabezado de ejemplo <span class="badge bg-secondary">Nuevo</span></h2>
<h3>Encabezado de ejemplo <span class="badge bg-secondary">Nuevo</span></h3>
<h4>Encabezado de ejemplo <span class="badge bg-secondary">Nuevo</span></h4>
<h5>Encabezado de ejemplo <span class="badge bg-secondary">Nuevo</span></h5>
<h6>Encabezado de ejemplo <span class="badge bg-secondary">Nuevo</span></h6>

Botones

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

<button type="button" class="btn btn-primary">
  Notificaciones <span class="badge 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 indicación visual de 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 un contexto adicional con un texto adicional oculto visualmente.

Posicionado

Usa las utilidades para modificar un .badge y colócalo 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">mensajes no leídos</span>
  </span>
</button>

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

<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

Utiliza nuestras clases de utilidad de fondo para cambiar rápidamente la apariencia de una insignia. Ten en cuenta que cuando usas el .bg-light predeterminado de Bootstrap, es probable que necesites una utilidad de color de texto como .text-dark para un estilo adecuado. Esto se debe a que las utilidades de fondo no configuran 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>
Transmitir significado a las tecnologías de asistencia

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 la información denotada por el color sea obvia a partir del contenido mismo (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Insignias de píldora

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

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;