Chip

2.3.4

O componente Chip é utilizado para sinalizar critérios ou atributos relacionados a buscas ou filtros de uma lista de informações.

Default

Removable

Skeleton

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

const Example: React.FC = () => (
  <Chip icon={<BoxPackedIcon size={12} />} text="Text" />
);

export default Example;

Anatomia do componente

O componente é composto por um texto estilizado, além de dois ícones opcionais que podem ser utilizados em conjunto.

Guidelines

O componente Chip de 2 formas diferentes, podendo ser alternadas de acordo com a necessidade.

Non removable - Utilizamos essa opção quando não é necessário remover o critério ou filtro.
Removable - Utilizamos essa opção quando é necessário remover o critério ou filtro.

Escolha do ícone personalizável

O uso do ícone é opcional e deve estar diretamente relacionado ao critério ou contexto que o componente está selecionando, facilitando assim o entendimento do termo da busca ou filtro.

Ícone de fechar

O ícone de fechar deve estar visível sempre que for possível anular os critérios do filtro ou busca.

Conteúdo

O texto do componente deve explicar claramente a informação que o representa em poucas palavras. Embora seja interativo, não descreve uma ação e portanto não deve ser um verbo.

Recomendações de uso

Exibir um ou mais critérios de um filtro
Remover critérios de um filtro

Componentes relacionados

Tag - Pode ser utilizado para categorizar informações, organizar ou indicar status de elementos ou componentes usando palavras-chave, ícones ou cores.
Badge - É utilizado para comunicar quantidades de itens ou ações pendentes.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/chip

Props

Additional props are passed to the <Chip> element. See button docs for a list of props accepted by the <Chip> element.

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.

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.
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.