Tag
Resumo
Uma Tag é um rótulo compacto que classifica, organiza ou descreve um objeto por meio de uma palavra-chave ou atributo. Em geral tem um texto curto e, de forma opcional, um ícone à esquerda ou um botão para remover. O objetivo é dar contexto rápido sobre um item sem competir com o conteúdo principal da tela.
Tags podem ser apenas informativas (somente leitura) ou interativas (clicáveis para filtrar, ou removíveis dentro de um campo de entrada). Essa distinção entre somente leitura e interativa define boa parte das decisões de design e de acessibilidade descritas nesta página.
Anatomia
Container: A base da Tag. Define a forma (cantos arredondados), o preenchimento interno e a cor de fundo ou borda que agrupa os elementos e separa a Tag do conteúdo ao redor.
Label: O texto curto que nomeia a categoria ou o atributo. É o único elemento sempre presente. Deve ser conciso para evitar truncamento.
Ícone à esquerda (opcional): Reforça o significado do label — por exemplo, um ícone de hashtag para tags, ou um indicador de cor para a categoria.
Ícone à direita (opcional): Um x ao final, presente quando a Tag é removível (em geral dentro de campos de entrada). É um alvo interativo próprio, com requisitos de acessibilidade específicos — ver a seção Acessibilidade.
Quando usar
Status ou notificações
Ideal para indicar mensagens não lidas, alertas ou atualizações (por exemplo, contagem de mensagens em um ícone).
Destacando a importância
Funciona bem para chamar a atenção para elementos específicos (por exemplo, “Novidades”, “Destaques” ou “Promoções”).
Indicadores compactos
Adequado para áreas pequenas, transmitindo informações rápidas (ex.: disponibilidade)
categorizar um artigo
rotular um item por atributo
filtros removíveis num campo de busca.
Tag, Badge ou Chip?
Esses três componentes parecem iguais, formatos pequenos e arredondados com texto curto, mas resolvem problemas diferentes. Confundir os três é a causa mais comum de inconsistência em design systems. A regra prática: pergunte se o elemento é interativo e o que ele comunica.
Tag: Classifica e descreve um objeto. Pode ser somente leitura ou interativa (filtrar, remover). Contém texto (o label), às vezes com um ícone.
Badge: Comunica status ou contagem e é sempre estático (não clicável). Costuma ser muito pequeno e fica anexado a outro elemento.
Chip: É a forma mais interativa da família. Representa uma entrada, seleção ou filtro com o qual a pessoa interage diretamente. Pode conter avatar, ícone, texto e botão de remover.
Atenção à nomenclatura: a fronteira entre Tag e Chip muda conforme o design system
O Material Design chama tudo de Chip; a Atlassian e outros chamam de Tag. Não existe padrão universal, o que importa é escolher um nome dentro do seu próprio design system e usá-lo de forma consistente.
Aspecto | Tag | Badge | Chip |
|---|---|---|---|
Interativo? | Opcional | Nunca | Sempre |
Conteúdo | Texto, às vezes ícone | Número, ponto ou status | Texto, avatar, remover |
Função | Classificar e descrever | Notificar status ou contagem | Selecionar e filtrar |
Exemplo | Tags em um artigo | Mensagens não lidas | Filtros de uma busca |
Acessibilidade
A
Se a cor da tag carrega significado (categoria, tipo, prioridade), a cor não pode ser o único canal dessa informação (WCAG 1.4.1).
Se a tag tem ícone de remover ("x") ou ícone de significado, esse ícone precisa de um nome textual equivalente, não pode ser só o desenho (WCAG 1.1.1).
Instruções e referências à tag não podem depender só de cor, forma, posição (WCAG 1.3.3).
Se a tag é interativa, o propósito da ação precisa ser compreensível pelo texto da tag (WCAG 2.4.4).
AA
O texto do label precisa de contraste de pelo menos 4.5:1 contra o fundo da tag (WCAG 1.4.3).
A borda ou o fundo que delimita a tag, o ícone de remover e qualquer sinal de estado precisam de pelo menos 3:1 contra a cor adjacente (WCAG 1.4.11).
A tag interativa e o botão de remover, precisam ter uma área de toque de 24×24px (WCAG 2.5.8).
AAA
O texto do label com contraste de 7:1 contra o fundo da tag (WCAG 1.4.6).
A tag interativa e o botão de remover com área de toque de no mínimo 44×44px (WCAG 2.5.5).
O indicador de foco com espessura equivalente a um perímetro de 2px ao redor do elemento e contraste de 3:1 entre o estado focado e o não-focado (WCAG 2.4.13)
Boas práticas
Use tags apenas para conteúdo relacionado a objetos
As tags são reservadas para conteúdo relacionado a objetos. Para avatares de pessoas, equipes, projetos ou espaços, use a tag de avatar.
Use o ícone de hashtag ao se referir ao conceito de Tags
Ao usar o componente de etiqueta para representar um recurso de marcação ou rotulagem, use o termo “Etiquetas” para representar esse conceito e o ícone de hashtag para manter a consistência entre os aplicativos. Isso facilita o reconhecimento e acelera a compreensão do usuário, fornecendo pistas visuais familiares.
Não utilize tags diretamente no texto do corpo
As etiquetas são projetadas para rotular e categorizar, não para serem usadas diretamente em textos longos, como parágrafos ou conteúdo do editor.
Ao escrever tags, evite quebrar a linha
A tag possui uma largura máxima de 200 pixels (ou um valor personalizado para maxWidth), o que faz com que os rótulos sejam truncados. Se a tag não for gerada pelo usuário, mantenha os rótulos curtos para evitar o truncamento.
Referências
https://componentes.design/aulas/toggle
https://designsystems.surf/components/tag
https://mobbin.com/glossary/badge