Tag

2.5.1

Comunica o status ou a categoria de um elemento por meio de uma palavra-chave breve e uma cor semântica.

Ver no Figma

Quando usar

Comunicar o status de um elemento: mostrar rapidamente em que situação um elemento está dentro de uma lista ou tabela, sem abrir o detalhe. Ex.: "Enviado", "Pendente", "Rejeitado".
Categorizar um elemento com uma palavra-chave: classificá-lo dentro de um tipo ou grupo fixo, que a pessoa não precisa remover. Ex.: "Novo", "Beta", "Rascunho".
Sinalizar conteúdo gerado por IA: identificar com a aparência ai-generative um valor ou uma recomendação gerada pela inteligência artificial, para diferenciá-lo do restante. Ex.: "Gerado por IA".

Quando não usar

Permitir que a pessoa adicione ou remova a etiqueta: o Tag é somente leitura e não pode ser removido. Em vez disso, usar Chip. Ex.: um critério ou filtro aplicado em uma lista.
Mostrar uma quantidade ou um contador: comunicar o número de itens ou de ações pendentes associadas a uma seção. Em vez disso, usar Badge. Ex.: a quantidade de mensagens não lidas.
Executar uma ação ao clicar: o Tag não é interativo nem dispara nenhuma ação. Em vez disso, usar Button ou Link. Ex.: confirmar um pedido ou ver seu detalhe.

Anatomia

Entregue

Surface: contêiner de cor que define o significado semântico da etiqueta.
Text: palavra-chave que nomeia o status ou a categoria, em poucas palavras. É obrigatória.
Icon: elemento opcional, posicionado antes do texto, que reforça a leitura do status sem substituí-lo.

Variantes

Aparência

Neutral

Neutral: status ou categoria sem carga semântica positiva nem negativa. Valor padrão. Ex.: "Arquivado", "Rascunho", "Reembolsado".

Primary

Primary: usa a cor da marca para destacar um elemento, como uma novidade ou uma recomendação. Ex.: "Novo", "A enviar", "A retirar".

Success

Success: status positivo ou concluído com sucesso. Ex.: "Enviado", "Recebido", "Ativado".

Warning

Warning: status em transição ou que exige atenção, sem ser um erro. Ex.: "Pendente", "Em análise", "Cancelamento pendente".

Danger

Danger: status de erro, rejeição ou resultado negativo. Ex.: "Rejeitado", "Vencido", "Cancelado".

AI generative

AI generative: reservar para conteúdo ou recomendações gerados por inteligência artificial, para diferenciá-los do restante. Ex.: "Gerado por IA", "Recomendado pela Lumi".

Aplicação

Costuma acompanhar o título ou o dado principal de uma linha, um cartão ou um cabeçalho de seção, posicionada perto do elemento que qualifica para que a relação entre ambos seja evidente. É comum em colunas de status de tabelas de pedidos, linhas de meios de pagamento ou listas de produtos.

Pedido #1042

Ana Gómez

Enviado

Pedido #1043

Luis Pérez

Pendente

Pedido #1044

Sofía Ruiz

Rejeitado

Do and Don'ts

Pedido #1050

Pendente

Usar uma palavra-chave breve que nomeie o status ou a categoria.

Pedido #1050

Pagamento pendente de confirmação

Evitar frases longas ou orações completas dentro do Tag.

Pedido #1051

Reembolsado

Usar neutral quando o status é uma resolução encerrada, mesmo que o nome soe negativo.

Pedido #1051

Reembolsado

Evitar danger em um status já resolvido: um reembolso é uma resolução, não um erro.

Acessibilidade

Não depender só da cor: o significado da aparência sempre se apoia no texto, de modo que o status seja compreendido sem distinguir cores. A palavra-chave é o que comunica; a cor reforça.
Ícone que reforça a mensagem: quando o Tag inclui um ícone, ele reforça o significado do texto em vez de trazer informação por si só. O status sempre se entende pelo texto, sem depender do ícone.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/components

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

const Example: React.FC = () => (
  <Tag appearance="neutral">
    <BoxPackedIcon size={12} />
    <Text color="neutral-textLow">Text</Text>
  </Tag>
);

export default Example;

Props

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

Componentes relacionados

Chip — Para representar um critério ou filtro que a pessoa pode remover, em vez de um status fixo somente leitura.
Badge — Para comunicar a quantidade de itens ou de ações pendentes, em vez de uma categoria com palavras-chave.

Tag

Name	Type	Default	Description
children*	React.ReactNode		The content of the tag.
appearance	'ai-generative' 'danger' 'neutral' 'primary' 'success' 'warning'	'neutral'	Change the visual style of the tag.

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