Chip

Selo curto para estado, categoria ou rótulo de um objeto.

O Chip diz o estado ou a categoria de algo, como a Marca publicada ou o Pedido atrasado. Ele tem o tamanho do conteúdo, nunca é esticado, e não é um botão: para filtros e ações use Button ou Segment.

import { Chip } from "@rastreio-x/ui";

Padrão

Rascunho

Playground

Combine variante, cor e tamanho; o código mostra só o que difere do padrão.

Em Trânsito

Controles

variant

color

size

Conteúdo

import { Chip } from "@rastreio-x/ui";

<Chip variant="soft" color="accent">Em Trânsito</Chip>

Cores

color carrega o significado: success, warning e danger são estados reais; accent destaca; default é neutro.

RascunhoEm revisãoPublicadaAtrasadoFalhou

Variantes

A variante soft é a de estado no Admin: fundo suave com texto na cor do estado. primary preenche, secondary é o padrão discreto e tertiary fica sem fundo.

primarydefaultaccentsuccesswarningdanger

secondarydefaultaccentsuccesswarningdanger

tertiarydefaultaccentsuccesswarningdanger

softdefaultaccentsuccesswarningdanger

Tamanhos

PequenoMédioGrande

Com ícone

Estado nunca depende só da cor. Junte um ícone e o texto; o ícone é decorativo e leva aria-hidden.

EntregueEm trânsitoAtrasado

No Admin

O cabeçalho de página tem um único selo, com o estado da entidade. Não repita a mesma informação em um segundo chip.

Sua OperaçãoPublicada

Versão 3, publicada hoje às 14:20.

Anatomia

Chip
└── Chip.Label

Texto simples dentro do Chip é envolvido em Chip.Label automaticamente; escreva Chip.Label só ao combinar com ícones.

Propriedades

Raiz (Chip):

Chip
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`color`	`'danger' \| 'success' \| 'default' \| 'accent' \| 'warning'`	-	Cor semântica do selo: `default`, `accent`, `success`, `warning` ou `danger`.
`render`	`DOMRenderFunction<E, undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`size`	`'lg' \| 'md' \| 'sm'`	-	Tamanho: `sm`, `md` ou `lg`.
`style`	`React.JSX.IntrinsicElements[E]['style']`	-	Estilos em linha aplicados ao elemento.
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'soft'`	-	Estilo do selo: `primary` (cheio), `secondary`, `tertiary` ou `soft` (fundo suave).

Rótulo (Chip.Label):

Chip.Label
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`render`	`DOMRenderFunction<E, undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`React.JSX.IntrinsicElements[E]['style']`	-	Estilos em linha aplicados ao elemento.

Animações

Sem movimento
indicativo

O Chip não anima. Se o estado muda (por exemplo, de Em trânsito para Entregue), a troca é imediata; anuncie-a numa região viva se ela acontecer sem ação da pessoa.

Acessibilidade

O chip é texto; o ícone é decorativo e o estado vai em palavras.
Contraste de 4,5:1 entre o texto e o fundo suave, nos dois temas.
Se o chip representa algo clicável, use um botão, não um chip com onClick.

Boas práticas

Faça

Chip soft com a cor do estado e um ícone: Atrasado com triângulo.

Evite

Um chip para cada informação da linha, ou o mesmo estado repetido no selo do topo e no chip.

Use soft para estado e mantenha a mesma cor para o mesmo estado em todas as telas.
Rótulos curtos, uma ou duas palavras, em Title Case.
Nunca estique o chip para preencher a coluna.
Sem caixa alta no texto nem no CSS.

Relacionados

Alert quando o estado exige explicação.
Avatar para identificar uma pessoa ou loja.
Timeline para o estado ao longo do tempo.