Badge

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Indicadores numéricos o de estado. Usa el bloque BEM .cl-badge del Kit Digital.

Punto

<span class="cl-badge cl-badge--dot" role="status" aria-label="Notificaciones sin leer"></span>

Conteo

<span class="cl-badge" role="status" aria-label="1 notificaciones">1</span>

Conteo alto

<span class="cl-badge" role="status" aria-label="999+ notificaciones">999+</span>

Anclado a ícono

<span class="cl-badge-anchor" style="font-size: 24px;">
  <span class="cl-icon" data-icon="notifications" aria-hidden="true"></span>
  <span class="cl-badge" role="status" aria-label="1 notificaciones">1</span>
</span>

Variaciones

<span class="cl-badge cl-badge--dot" role="status" aria-label="Notificaciones sin leer"></span>

<span class="cl-badge" role="status" aria-label="1 notificaciones">1</span>

<span class="cl-badge" role="status" aria-label="999+ notificaciones">999+</span>