Chip

2.6.1

Permite representar critérios, filtros ou atributos aplicados a uma lista de dados, de forma compacta e opcionalmente removível.

Ver no Figma

Quando usar

Mostrar filtros aplicados: exibir os critérios ativos sobre uma lista ou busca, de modo que fiquem visíveis de imediato e possam ser removidos. Ex.: "Pagamento recebido", "A enviar", "A partir de: 01/07".
Representar valores selecionados: exibir os atributos ou valores escolhidos dentro de um formulário ou seletor múltiplo. Ex.: "Vermelho", "Tamanho M", "São Paulo (15 cidades)".
Sinalizar um valor gerado por IA: indicar com a propriedade aiGenerated que o valor foi sugerido pela inteligência artificial. Ex.: uma categoria sugerida automaticamente para um produto.

Quando não usar

Categorizar de forma fixa: indicar o status de um elemento que a pessoa não pode remover. Em vez disso, usar Tag. Ex.: "Ativo", "Pendente".
Comunicar uma quantidade: mostrar o número de itens ou de ações pendentes. Em vez disso, usar Badge. Ex.: o número de notificações sobre um ícone.
Capturar o texto de um filtro: o Chip exibe o critério já aplicado, não o campo que o captura. Em vez disso, usar Input.

Anatomia

Vestuário

Surface: contêiner do chip; define o fundo e a borda.
Text: descreve o critério ou atributo que representa, em poucas palavras.
Icon: elemento opcional, posicionado antes do texto, que reforça o critério representado.
Close icon: elemento opcional, visível com removable, que permite remover o critério aplicado.

Variantes

Basic e removable

Vence em 3 dias

Basic: aparência padrão. Exibe um critério ou atributo somente leitura, que a pessoa não pode remover. Usar quando o valor é informativo ou não pode ser anulado naquele contexto. Ex.: um aviso de vencimento, ou um atributo já aplicado que é exibido em um resumo.

Pagamento recebido

Removable: exibe o ícone de fechar para remover o critério ou filtro aplicado. Usar quando a pessoa pode anular esse critério. Ex.: um filtro aplicado a uma lista de vendas.

Gerado por IA

Vestuário

aiGenerated: destaca o chip com uma borda em degradê para indicar que seu valor foi gerado por IA. Ex.: uma categoria sugerida automaticamente para um produto.

Estados

Aplicação

Costuma aparecer agrupado em uma barra de filtros sobre uma lista ou tabela, perto do conteúdo que qualifica. Cada filtro aplicado é exibido como um chip removable, e a barra pode ser acompanhada de um acesso para ajustar os filtros.

2 vendas filtrando por:

Pagamento recebido

A enviar

Do and Don'ts

Pagamento recebido

Descrever o critério com uma frase nominal breve.

Filtrar por pagamento

Evitar redigir o texto como uma ação ou com um verbo.

Tamanho M

Usar o ícone de fechar apenas quando a pessoa pode remover o critério.

Vence em 3 dias

Evitar exibir o ícone de fechar em um chip somente leitura.

Acessibilidade

Foco visível: o Chip recebe foco pelo teclado e exibe um anel de focus; não removê-lo via CSS.
Não depender só do ícone: o texto comunica o critério; o ícone o reforça, nunca o substitui.
Ação de fechar com contexto: quando é removable, a ação de remover deve ter um rótulo acessível que indique qual critério é eliminado. Ex.: "Remover filtro Vestuário".

Implementação

Instale o componente via 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

As propriedades adicionais são repassadas ao elemento <Chip>. Consulte a documentação do elemento button para ver a lista de atributos aceitos.

Componentes relacionados

Tag — Para categorizar informações ou indicar o status de um elemento com palavras-chave, ícones e cores, sem que a pessoa possa removê-lo.
Badge — Para comunicar a quantidade de itens ou de ações pendentes.

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.

Ajude-nos a melhorar a documentação

Encontrou um problema ou tem uma sugestão? Conte para a gente.

Compartilhe seu feedback