Badges

Etiquetas de estado con .cl-badge más un modificador de tono. El punto de color a la izquierda lo agrega la clase automáticamente.

Tonos

Seis tonos semánticos. Elegí por el significado del estado, no por el color.

<span class="cl-badge cl-badge--positive">Aprobada</span>
<span class="cl-badge cl-badge--warning">Pendiente</span>
<span class="cl-badge cl-badge--negative">Rechazada</span>
<span class="cl-badge cl-badge--info">En proceso</span>
<span class="cl-badge cl-badge--accent">Nueva</span>
<span class="cl-badge cl-badge--neutral">Borrador</span>

Tags (chips de filtro)

.cl-tag para filtros activos removibles; el ícono de cierre lleva .cl-tag-x.

<span class="cl-tag">Categoría: A <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-tag-x"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
<span class="cl-tag">Tipo: X <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-tag-x"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
<span class="cl-tag">Activos <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="cl-tag-x"><path d="M18 6 6 18M6 6l12 12"/></svg></span>