Chips

Revisa y prueba el componente en código

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

Etiquetas compactas de filtro o estado. Usa el bloque BEM .cl-chip del Kit Digital.

Básico

<span class="cl-chip cl-chip--primary cl-chip--sm">
  <span class="cl-chip__label">Etiqueta</span>
</span>

Tamaños

<span class="cl-chip cl-chip--primary cl-chip--sm"><span class="cl-chip__label">Small</span></span>
<span class="cl-chip cl-chip--primary cl-chip--md"><span class="cl-chip__label">Medium</span></span>
<span class="cl-chip cl-chip--primary cl-chip--lg"><span class="cl-chip__label">Large</span></span>

Paletas

<span class="cl-chip cl-chip--success cl-chip--sm"><span class="cl-chip__label">Success</span></span>
<span class="cl-chip cl-chip--error cl-chip--sm"><span class="cl-chip__label">Error</span></span>
<span class="cl-chip cl-chip--warning cl-chip--sm"><span class="cl-chip__label">Warning</span></span>
<span class="cl-chip cl-chip--dark cl-chip--sm"><span class="cl-chip__label">Dark</span></span>

Con cierre

<span class="cl-chip cl-chip--primary cl-chip--sm">
  <span class="cl-chip__label">Escribe algo</span>
  <button class="cl-chip__remove" type="button" aria-label="Quitar Escribe algo">
    <span class="cl-icon" data-icon="close" aria-hidden="true"></span>
  </button>
</span>