Chip
O componente Chip é utilizado para sinalizar critérios ou atributos relacionados a buscas ou filtros de uma lista de informações.
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;O componente é composto por um texto estilizado, além de dois ícones opcionais que podem ser utilizados em conjunto.
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.
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.
O ícone de fechar deve estar visível sempre que for possível anular os critérios do filtro ou busca.
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.
- Exibir um ou mais critérios de um filtro
- Remover critérios de um filtro
- 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.
Instale o componente via terminal.
npm install @nimbus-ds/chipAdditional props are passed to the <Chip> element. See button docs for a list of props accepted by the <Chip> element.