Badges

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

Ejemplo

Las insignias se escalan para coincidir con el tamaño del elemento principal inmediato mediante el uso de em unidades y tamaños de fuente relativos.

Example heading New


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

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


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

Tenga en cuenta que, según cómo se utilicen, las credenciales 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 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), considere incluir contexto adicional con un fragmento de texto adicional visualmente oculto.


  <button type="button" class="btn btn-primary">
    Profile <span class="badge badge-light">9</span>
    <span class="sr-only">unread messages</span>
  </button>

Variaciones contextuales

Agregue cualquiera de las clases de modificadores que se mencionan a continuación para cambiar la apariencia de una insignia.

primary secondary success info warning danger light dark gray tertiary


  <span class="badge badge-primary">primary</span>
  <span class="badge badge-secondary">secondary</span>
  <span class="badge badge-success">success</span>
  <span class="badge badge-info">info</span>
  <span class="badge badge-warning">warning</span>
  <span class="badge badge-danger">danger</span>
  <span class="badge badge-light">light</span>
  <span class="badge badge-dark">dark</span>
  <span class="badge badge-gray">gray</span>
  <span class="badge badge-tertiary">tertiary</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úrese de que la información indicada por el color sea obvia a partir del contenido en sí (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .sr-only clase.

Insignias de pastillas

Utilice la .badge-pill clase modificadora para hacer que las insignias sean más redondeadas (con una border-radius horizontal más grande y adicional padding ). Útil si echas de menos las insignias de v3.

primary secondary success info warning danger light dark gray tertiary


  <span class="badge badge-pill badge-primary">primary</span>
  <span class="badge badge-pill badge-secondary">secondary</span>
  <span class="badge badge-pill badge-success">success</span>
  <span class="badge badge-pill badge-info">info</span>
  <span class="badge badge-pill badge-warning">warning</span>
  <span class="badge badge-pill badge-danger">danger</span>
  <span class="badge badge-pill badge-light">light</span>
  <span class="badge badge-pill badge-dark">dark</span>
  <span class="badge badge-pill badge-gray">gray</span>
  <span class="badge badge-pill badge-tertiary">tertiary</span>

Enlaces

El uso de las .badge-* clases contextuales en un <a> elemento proporciona rápidamente insignias procesables con estados de desplazamiento y enfoque.

primary secondary success info warning danger light dark gray tertiary


  <a href="#" class="badge badge-primary">primary</a>
  <a href="#" class="badge badge-secondary">secondary</a>
  <a href="#" class="badge badge-success">success</a>
  <a href="#" class="badge badge-info">info</a>
  <a href="#" class="badge badge-warning">warning</a>
  <a href="#" class="badge badge-danger">danger</a>
  <a href="#" class="badge badge-light">light</a>
  <a href="#" class="badge badge-dark">dark</a>
  <a href="#" class="badge badge-gray">gray</a>
  <a href="#" class="badge badge-tertiary">tertiary</a>