20/Acciones y etiquetas

Chips y tags

Chips con muestra de color para filtros o tecnologías, tags de estado y la tecla kbd.

Chips

El color de la muestra sale de --cb-chip-color; por defecto es el acento.

HTML

<div class="cb-chips">
  <a class="cb-chip" href="#"><i class="cb-chip__swatch" style="--cb-chip-color: var(--cb-accent-800)"></i>Laravel</a>
  <a class="cb-chip" href="#"><i class="cb-chip__swatch" style="--cb-chip-color: var(--cb-accent-600)"></i>React Native</a>
  <a class="cb-chip" href="#"><i class="cb-chip__swatch"></i>Kotlin</a>
  <a class="cb-chip" href="#"><i class="cb-chip__swatch" style="--cb-chip-color: var(--cb-accent-300)"></i>Docker</a>
  <button class="cb-chip" type="button" aria-pressed="true"><i class="cb-chip__swatch" style="--cb-chip-color: var(--cb-success)"></i>Filtro activo</button>
</div>

Tags de estado

Por proyecto Activo Pagado Pendiente Vencido Borrador

HTML

<span class="cb-tag">Por proyecto</span>
<span class="cb-tag cb-tag--live">Activo</span>
<span class="cb-tag cb-tag--success">Pagado</span>
<span class="cb-tag cb-tag--warning">Pendiente</span>
<span class="cb-tag cb-tag--danger">Vencido</span>
<span class="cb-tag cb-tag--info">Borrador</span>

Atajos de teclado

Buscar ⌘ K · Cerrar Esc · Navegar ↑ ↓

HTML

<span class="text-cb-sm text-cb-muted">Buscar <kbd>⌘</kbd> <kbd>K</kbd> · Cerrar <kbd>Esc</kbd> · Navegar <kbd>↑</kbd> <kbd>↓</kbd></span>

Clases y modificadores

Clase	Descripción
`.cb-chips`	Fila de chips con salto de línea.
`.cb-chip`	Chip redondeado. `.is-active` o `aria-pressed="true"` lo resalta.
`.cb-chip__swatch`	Muestra de color (`--cb-chip-color`).
`.cb-tag`	Etiqueta de estado.
`.cb-tag--live\|accent\|success\|warning\|danger\|info`	Variantes de color.
`kbd`, `.cb-kbd`	Tecla de atajo.

Accesibilidad

Si un chip filtra contenido, hazlo button con aria-pressed.
Las variantes de tag tienen contraste AA en todos los temas.