Chip

El Chip es una etiqueta compacta que clasifica o describe un contenido (categoría, estado, filtro aplicado). Puede llevar un botón de cierre para quitarlo.

Propiedades y configuraciones

Cuando usarlo

Úsalo para etiquetar contenidos con una categoría o estado breve (“En línea”, “En revisión”, “Aprobada”) y para mostrar los filtros aplicados en una búsqueda, con opción de quitarlos.

Si necesitas una acción, usa Button o Link. Para contar novedades pendientes, usa Badge. Para comunicar un mensaje con explicación (error, advertencia), usa Alert.

Buenas prácticas

Recomendado: Usa etiquetas de una o dos palabras

El chip se lee de un vistazo: resume la categoría o el estado y deja la explicación al contenido.

Recomendado: Asocia cada color a un significado estable

Success para aprobado, Info para en revisión, Warning para acción pendiente y Error para rechazado, siempre igual en todo el servicio.

Recomendado: Usa chips con cierre para los filtros aplicados

Cada filtro activo se ve como un chip que la persona puede quitar uno a uno.

Recomendado: Reserva el estilo Contrast para lo que debe destacar

Default basta para la mayoría de las etiquetas; Contrast solo en el estado que más importa destacar.

Malas prácticas

No recomendado: No uses el chip como botón o enlace

El chip no se anuncia como control ni tiene estados de interacción. Acciones como “Postular” o “Descargar” van en un Button.

No recomendado: No uses colores semánticos para categorías

Pintar temas con Success, Error o Warning hace creer que comunican un estado. Las categorías van con un mismo tipo.

No recomendado: No pongas frases largas en el chip

El texto largo se trunca y se pierde el mensaje. Para explicar, usa un Alert o texto de apoyo.

No recomendado: No agregues cierre a chips que no se pueden quitar

La “×” promete que la etiqueta se puede eliminar. En un estado asignado por la institución confunde y frustra.

Recomendaciones de accesibilidad

Nombra la acción del botón de cierre
El __remove es un <button> con aria-label. Incluye el nombre del chip (p. ej. “Quitar Región: Valparaíso”), no un genérico “Quitar filtro” repetido en todos.

No dependas solo del color
El estado debe entenderse por el texto del chip. “Rechazada” sobre fondo rojo funciona; un chip de color sin texto claro, no.

Mueve el foco con sentido al quitar un chip
Al eliminar un filtro, lleva el foco al siguiente chip o al control de filtros, para que la navegación con teclado no se pierda.

Anuncia los cambios en los resultados
Cuando quitar un chip cambia el listado, informa el nuevo total de resultados (p. ej. con una región aria-live), porque el cambio no siempre es visible desde la posición del foco.

Evita el truncado en información clave
Si el texto se corta con “…”, la parte oculta no es visible para todas las personas. Usa etiquetas cortas en vez de confiar en el truncado.

Agrupa los chips relacionados
Una fila de filtros aplicados se entiende mejor con una etiqueta visible o accesible (“Filtros aplicados”) o como lista, para que el lector de pantalla anuncie cuántos hay.