Insignias
Documentación y ejemplos para insignias, nuestro pequeño componente de conteo y etiquetado.
Ejemplos
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. A partir de la v5, las insignias ya no tienen estilos de enfoque o de desplazamiento para los enlaces.
encabezados
Encabezado de ejemploNuevo
Encabezado de ejemploNuevo
Encabezado de ejemploNuevo
Encabezado de ejemploNuevo
Encabezado de ejemploNuevo
Encabezado de ejemploNuevo
<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
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 bg-secondary">4</span>
</button>
Tenga 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 la cantidad de notificaciones), considere incluir un contexto adicional con un texto adicional oculto visualmente.
posicionado
Utilice las utilidades para modificar .badge
y colocarlo 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 puede reemplazar la .badge
clase con algunas utilidades más sin contar por 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
Utilice nuestras clases de utilidad de fondo para cambiar rápidamente la apariencia de una insignia. Tenga en cuenta que al usar el valor predeterminado de Bootstrap .bg-light
, es probable que necesite una utilidad de color de texto .text-dark
para un estilo adecuado. Esto se debe a que las utilidades en segundo plano no configuran nada más que background-color
.
<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
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden
class.
Pill badges
Use the .rounded-pill
utility class to make badges more rounded with a larger border-radius
.
<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;