Componentes de Bootstrap

Badges

Una etiqueta pequeña que cuenta algo o nombra un estado, junto a lo que describe.

Un badge es una etiqueta corta: un recuento (4 mensajes) o un estado (Completado, Oculto). Va junto a un título, un botón o una fila, y se lee con ello.

Cuándo usarlo

Úsalo

Una o dos palabras, o un número.
Usar píldoras (rounded-pill) para estados y contadores.
Elegir el color por significado y mantener el mismo para el mismo estado en todas partes.

No

Escribir frases en un badge.
Usar badges como botones.
Usar muchos colores en una lista: deja de significar algo.

Anatomía

Una badge con un color de fondo y un texto que contrasta con él. Dentro de un botón conserva su color y recibe un pequeño hueco.

Variantes y estados

Rellenos

Colores y píldoras

Primary Secondary Success Danger Warning Info Light Dark

Suaves, de contorno y con punto

Didactika añade las variantes que necesitan la mayoría de los estados. La suave (badge-soft) es el tinte del color y es la que se usa en listas; la de contorno (badge-outline) es la más discreta; un punto (badge-dot) convierte un badge en un estado.

Suaves, de contorno y con punto

Primary Secondary Success Danger Warning Info Light Dark

Active Pending review Suspended Draft Syncing

Tamaños

Tamaños

Small Default Large Small Default Large

En contexto

En contexto

Algebra I New

Completed Needs review Hidden from students

Combinaciones

Combinación	Para qué usarla
Suave × lista	Estados en una tabla o una lista: suave con punto y en píldora («Activo», «Pendiente de revisión»).
Relleno × recuento	Contadores en botones e iconos: relleno, en píldora, en peligro cuando pide atención.
Contorno × secundario	Una etiqueta que describe sin alertar (una categoría, una versión).
Badge + icono	Un icono antes del texto para un estado que lo tiene (Completado con una marca). No un icono y un punto a la vez.
Badge × esquina	Un contador en la esquina de un botón de icono o un avatar (`badge-float` dentro de `position-relative`).

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
Lo suave es lo predeterminado para estados	Una página llena de badges rellenos grita; los tintes dejan que el ojo lea las filas y vea cuál es «Pendiente».
El color del texto se deriva del rol	Un badge suave mantiene 4,5:1 sea cual sea el color del tema, algo que un pastel fijo no puede.
El punto repite el color en una forma	El estado no es solo un color: el punto más la palabra lo dicen dos veces.
Los contadores de esquina llevan un aro del color de la página	El número se lee sobre cualquier icono.

Clases

Clase	Qué hace
`badge`	Base
`text-bg-primary`, `text-bg-success`…`badge-primary`, `badge-success`…	Color y color del texto a la vez
`rounded-pill`	Totalmente redondeada
`badge-soft`, `badge-outline`	Badge teñido y de contorno, con el color del rol (Didactika)
`badge-dot`	Un punto de estado antes del texto (Didactika)
`badge-sm`, `badge-lg`	Badge más pequeño y más grande (Didactika)
`badge-float`	Un contador en la esquina de su elemento padre (Didactika)

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable. El color y el color del texto vienen juntos en text-bg-*.

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. El color es badge-* y la píldora es badge-pill (rounded-pill también funciona).

Accesibilidad

Un recuento debe decir qué cuenta: añade texto visualmente oculto («mensajes sin leer»).
El contraste del texto con el color es de al menos 4,5:1: usa text-bg-*, que lo elige.
Un estado también se escribe, no solo se colorea.