Chip

2.6.1

Permite representar criterios, filtros o atributos aplicados a una lista de datos, de forma compacta y opcionalmente removible.

Ver en Figma

Cuándo usar

Mostrar filtros aplicados: exponer los criterios activos sobre una lista o búsqueda, de modo que se vean de un vistazo y puedan quitarse. Ej.: "Pago recibido", "Por enviar", "Desde: 01/07".
Representar valores seleccionados: mostrar los atributos o valores elegidos dentro de un formulario o selector múltiple. Ej.: "Rojo", "Talle M", "Buenos Aires (15 ciudades)".
Señalar un valor generado por IA: indicar con la propiedad aiGenerated que el valor lo sugirió la inteligencia artificial. Ej.: una categoría sugerida automáticamente para un producto.

Cuándo no usar

Categorizar de forma fija: indicar el estado de un elemento que la persona no puede quitar. En su lugar, usar Tag. Ej.: "Activo", "Pendiente".
Comunicar una cantidad: mostrar el número de ítems o de acciones pendientes. En su lugar, usar Badge. Ej.: el número de notificaciones sobre un ícono.
Capturar el texto de un filtro: el Chip muestra el criterio ya aplicado, no el campo que lo captura. En su lugar, usar Input.

Anatomía

Indumentaria

Surface: contenedor del chip; define el fondo y el borde.
Text: describe el criterio o atributo que representa, en pocas palabras.
Icon: elemento opcional, ubicado antes del texto, que refuerza el criterio representado.
Close icon: elemento opcional, visible con removable, que permite quitar el criterio aplicado.

Variantes

Basic y removable

Vence en 3 días

Basic: apariencia por defecto. Muestra un criterio o atributo de solo lectura, que la persona no puede quitar. Usar cuando el valor es informativo o no se puede anular en ese contexto. Ej.: un aviso de vencimiento, o un atributo ya aplicado que se muestra en un resumen.

Pago recibido

Removable: muestra el ícono de cerrar para quitar el criterio o filtro aplicado. Usar cuando la persona puede anular ese criterio. Ej.: un filtro aplicado sobre una lista de ventas.

Generado por IA

Indumentaria

aiGenerated: resalta el chip con un borde en degradé para indicar que su valor fue generado por IA. Ej.: una categoría sugerida automáticamente para un producto.

Estados

Aplicación

Suele aparecer agrupado en una barra de filtros sobre una lista o tabla, cerca del contenido que califica. Cada filtro aplicado se muestra como un chip removable, y la barra puede acompañarse de un acceso para ajustar los filtros.

2 ventas filtrando por:

Pago recibido

Por enviar

Do and Don'ts

Pago recibido

Describir el criterio con una frase nominal breve.

Filtrar por pago

Evitar redactar el texto como una acción o con un verbo.

Talle M

Usar el ícono de cerrar solo cuando la persona puede quitar el criterio.

Vence en 3 días

Evitar mostrar el ícono de cerrar en un chip de solo lectura.

Accesibilidad

Foco visible: el Chip recibe foco por teclado y muestra un anillo de focus; no anularlo con CSS.
No depender solo del ícono: el texto comunica el criterio; el ícono lo refuerza, nunca lo reemplaza.
Acción de cierre con contexto: cuando es removable, la acción de quitar debe tener una etiqueta accesible que indique qué criterio se elimina. Ej.: "Quitar filtro Indumentaria".

Implementación

Instalá el componente vía terminal.

npm install @nimbus-ds/components

Default

Removable

AI generated

Skeleton

import React from "react";
import { Chip } from "@nimbus-ds/components";

const Example: React.FC = () => <Chip text="Text" />;

export default Example;

Props

Las propiedades adicionales se pasan al elemento <Chip>. Consultá la documentación del elemento button para ver la lista de atributos aceptados.

Componentes relacionados

Tag — Para categorizar información o indicar el estado de un elemento con palabras clave, íconos y colores, sin que la persona pueda quitarlo.
Badge — Para comunicar la cantidad de ítems o de acciones pendientes.
Input — Para capturar el texto del filtro que luego se muestra como Chip.

Chip

Name	Type	Description
text*	string	Text to be displayed on chip.
icon	React.ReactNode	SVG icon to be displayed on chip.
removable	boolean	Informs whether the close icon should be displayed.
aiGenerated	boolean	Highlights the chip to indicate its value was generated by AI. Applies AI gradient border and an AI outline.

Chip.Skeleton

Name	Type	Description
width	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
className	string
height	string	Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.

Ayudanos a mejorar la documentación

¿Encontraste un problema o tenés una sugerencia? Contanos.

Compartí tu opinión