Chip
Paquete: @tiendana/web-foundation
Etiqueta compacta en línea para estados y categorías. Se tiñe con un modificador de color y puede llevar un icono.
Características
✅ 7 variantes de color - Más una base neutra sin modificador
✅ Icono opcional - Elemento __icon antes del texto
✅ Texto truncado - Elipsis cuando el contenido no cabe
✅ Personalizable - --chip-bg y --chip-font-color para colores propios
Variantes
Ver código
Con icono
.chip__icon es un contenedor flex con font-size: var(--font-size-md); .chip__text aplica la truncación del texto.
Ver código
Colores propios
Sin modificador, el chip usa --chip-bg (por defecto --color-gray-100) y --chip-font-color (por defecto --color-gray-600). Defínelos en el propio elemento o en un ancestro:
Ver código
Los modificadores de color (.chip--primary, etc.) fijan background y color directamente, por lo que ignoran --chip-bg y --chip-font-color.
Referencia de clases
| Clase | Fondo | Texto |
|---|---|---|
.chip | --chip-bg (--color-gray-100) | --chip-font-color (--color-gray-600) |
.chip--primary | --color-natura | --color-dark-forrest |
.chip--green-neon | --color-green-neon | --color-dark-forrest |
.chip--sky | --color-sky | --color-dark-forrest |
.chip--light-sky | --color-light-sky | --color-dark-forrest |
.chip--sun | --color-sun | --color-light-sun |
.chip--red | --color-error | --color-light-sun |
.chip--lavender | --color-lavender | --color-light-lavender |
.chip__icon | Icono inicial | |
.chip__text | Texto con truncación |
Los colores de los modificadores se resuelven en compilación desde los tokens SCSS de la paleta, no mediante var() en tiempo de ejecución.
La base mide --font-size-xs con peso --font-weight-medium, padding --spacing-xs --spacing-sm, radio --border-radius-2xl y max-width: 100%.
Accesibilidad
- El color no debe ser el único portador del significado: el texto del chip debe nombrar el estado.
- Marca el icono decorativo con
aria-hidden="true": la ligadura de Material Symbols se lee como texto ("check_circle").