Contenido
Dos familias: la etiqueta de estado, con punto de color, y la etiqueta de oferta, en la tipografía de titulares y dibujada como una ficha con contorno.
Es una clase: badge se aplica sobre el elemento que ya lleva la etiqueta, acompañada de su variante. El punto indicador lo dibuja la propia clase.
Un badge es puramente informativo: va sobre el elemento que lleva la etiqueta, nunca dentro de un elemento interactivo como button o a.
Fondo tenue y texto coloreado, para que una pantalla con muchas etiquetas no resulte demasiado llamativa. Es la variante por defecto.
<span class="badge success">Activo</span>
<span class="badge warning">Pendiente</span>
<span class="badge error">Suspendido</span>
<span class="badge neutral">Borrador</span>no-dot oculta el punto en cualquiera de las variantes.
<span class="badge success no-dot">Activo</span>
<span class="badge error no-dot">Suspendido</span>offer cambia la tipografía a Syne 700 y quita el punto. Dibuja el contorno, y el relleno lo pone la clase de la superficie de marca que se le añada, que además refuerza el contorno y da al texto el color legible sobre ese fondo.
<span class="badge offer">Sin permanencia</span>
<span class="badge offer callout">Desde 7,90 € al mes</span>
<span class="badge offer standout">Dominio gratis</span>
<span class="badge offer spotlight">Más popular</span>| Token | Qué es |
|---|---|
--badge--background--neutral | El color de fondo de la etiqueta de estado neutra. |
--badge--color--neutral-text | El color del texto de la etiqueta de estado neutra. |
--badge--color--neutral-mark | El color del punto de la etiqueta de estado neutra. |