Sistema de Badge e Tag
Propósito
O Sistema de Badge e Tag fornece uma metodologia para projetar e implementar pequenos componentes informacionais que fornecem contexto rápido, status ou categorização. Esse skill garante que esses elementos permaneçam secundários ao conteúdo principal, sendo instantaneamente escaneáveis, acessíveis e logicamente organizados em todo o site.
Casos de Uso
- Indicadores de Status: Mostrando o estado de um objeto (ex.: "Ativo", "Pendente", "Esgotado").
- Categorização: Rotulando conteúdo por tópico, tipo ou coleção (ex.: "Produtividade", "Tutorial", "Novidade").
- Quantidade/Contagens: Exibindo números associados a um item (ex.: "12 Notificações", "5 Itens no Carrinho").
- Visibilidade de Filtros: Mostrando filtros ativos que podem ser removidos pelo usuário.
- Sinalização de Prioridade: Destacando atributos específicos como "Mais Vendido" ou "Urgente".
Quando NÃO Usar
- Ações Primárias: Não use badges ou tags como a principal Chamada para Ação (CTA); use botões do
sistema-de-estados-interativos. - Grandes Blocos de Conteúdo: Se a informação exigir mais de 2 a 3 palavras, use um
sistema-de-interface-de-cartaoou tipografia padrão. - Navegação: Embora tags possam levar a visualizações filtradas, elas não devem substituir o
sistema-de-navegacao-do-siteprincipal. - Ícones Meramente Decorativos: Se o elemento não tem significado semântico, ele pertence ao
sistema-de-iconografia.
Entradas
- Intenção do Conteúdo: É um status (estado), uma categoria (metadado) ou uma contagem (número)?
- Requisito Interativo: O elemento é estático, ou é removível/clicável?
- Contexto de Hierarquia: Qual é o elemento pai? (ex.: um card, um cabeçalho, uma linha de tabela).
- Tokens de Cor: Escala de cores semânticas existente (Sucesso, Aviso, Erro, Info).
Saídas
- Especificação de Anatomia Visual: Definições para raio de borda (pill vs. arredondado), preenchimento e tipografia.
- Matriz de Cores Semânticas: Mapeamento de cores para significados específicos (ex.: Verde = Sucesso).
- Especificações Interativas: Tratamentos visuais para hover, focus e ações de "remover" (X).
- Regras de Posicionamento: Diretrizes de onde esses elementos se posicionam em relação a títulos e imagens.
Fluxo de Trabalho
1. Distinguir entre Badge e Tag
Defina o papel funcional primeiro:
- Badges: Geralmente indicam Status (ex.: "Ao Vivo") ou Contagens (ex.: "3"). Eles geralmente são não interativos ou linkam a um único estado.
- Tags: Geralmente indicam Categorização (ex.: "SaaS"). São frequentemente interativos, permitindo que os usuários filtrem conteúdo ou removam a tag.
2. Estabelecer Anatomia Visual
Defina o estilo base para garantir que eles não se pareçam com botões:
- Tipografia: Use uma fonte menor, geralmente em maiúsculas ou seminegrito (ex.: 12px/0,75rem).
- Raio de Borda:
- Pill (Totalmente Arredondado): Melhor para status e contagens.
- Arredondado (4-8px): Melhor para categorização e tags removíveis.
- Tamanho: Mantenha a altura consistente (ex.: 20px-24px) para garantir que se alinhem bem com o texto.
3. Atribuir Lógica Semântica (Cor e Ícones)
Use cor para comunicar significado sem forçar o usuário a ler:
- Sucesso (Verde): "Completo", "Ativo", "Verificado".
- Aviso (Amarelo/Laranja): "Pendente", "Estoque Baixo", "Rascunho".
- Erro (Vermelho): "Falhou", "Crítico", "Fora de Estoque".
- Info/Neutro (Azul/Cinza): "Novo", "Categoria", "Metadado".
Regra: Sempre combine cor com texto ou um ícone para garantir acessibilidade para usuários daltônicos.
4. Definir Estados Interativos
Se a tag for interativa:
- Hover/Focus: Aplique uma sutil mudança de fundo ou alteração de borda.
- Removível: Inclua um ícone "X" claro com uma área mínima de toque de 24x24px (WCAG 2.2 SC 2.5.8), podendo ser ampliada para 44x44px onde o layout permitir para um uso tátil confortável.
5. Determinar Posicionamento e Hierarquia
- Sobreposição: Colocar um badge "Novo" no canto superior de uma imagem.
- Em Linha: Colocar um badge de status imediatamente após um título em um
sistema-de-cabecalho-de-pagina. - Agrupado: Empilhar múltiplas tags abaixo de uma descrição em um
sistema-de-interface-de-cartao.
Regras de Decisão
- O "Teste do Aperto de Olhos": Se um badge é tão brilhante que distrai do H1, reduza sua saturação ou use um estilo de contorno.
- Limite a Contagem: Nunca use mais de 3 tags em um único cartão para evitar poluição visual.
- Comprimento do Texto: Mantenha os rótulos em 1-2 palavras. Trunque ou use tooltips se os dados forem dinâmicos e imprevisíveis.
- Distinção de Botões: Badges devem ter um tratamento visual diferente (ex.: tamanho menor, raio diferente) dos botões primários "Enviar" ou "Comprar".
Restrições
- Acessibilidade: O texto dentro de badges/tags deve atender ao WCAG AA (4,5:1 de contraste). Tags interativas devem ser navegáveis por teclado.
- Responsividade: Tags em um grupo devem quebrar para a próxima linha (
flex-wrap: wrap) em vez de transbordar o contêiner. - Alvos de Toque: Tags removíveis devem ter um alvo grande o suficiente para a ação de "fechar" (mín. 24x24px conforme WCAG 2.2 SC 2.5.8; 44x44px preferido).
Padrões Comuns de Falha
- O "Imitador de Botão": Fazer tags parecerem exatamente com botões, levando os usuários a esperar uma ação primária.
- Dependência Excessiva de Cor: Usar vermelho/verde/amarelo sem rótulos de texto, tornando impossível para usuários daltônicos ou de leitores de tela entenderem o status.
- Sopa de Tags: Aglomerar um cartão com 10+ tags, tornando nenhuma delas útil.
- Raio Inconsistente: Misturar badges em forma de pílula e tags de cantos quadrados na mesma interface.
Critérios de Validação
- Badges e tags são visualmente distintos dos botões.
- Cores semânticas são usadas de forma consistente (ex.: Verde sempre significa Sucesso).
- As taxas de contraste atendem ao WCAG AA (4,5:1) para todas as variações de cor.
- Tags interativas incluem estados de foco e alvos de toque de pelo menos 24x24px (WCAG 2.2 SC 2.5.8).
- Os elementos quebram graciosamente em viewports móveis.
- Ícones são usados junto com a cor para indicadores de status críticos.