Tag

• Uso
ExemplosCódigo

A Tag é um pedaço pequeno de informações encapsuladas, em uma estrutura que as diferencia do contexto em que estão inseridas.

Devem ser usadas para classificar ou categorizar informações dentro do produto e devem, obrigatoriamente, conter um rótulo de texto.

Clicáveis

A Tag com interação pode ter links ou disparar uma ação. Use esse tipo de tag quando for permitido enviar a pessoa usuária para uma tela ou fluxo diferente.

Sistema

A Tag do sistema é aquela que o produto inclui na interface. Deve respeitar a semântica das cores e não pode ser removidas. Exemplo: Tags de "Novo" ou de "Upgrade", que costumam aparecer ao lado de features.

Removível

Tag inserida no sistema pelas pessoas usuárias. Deve aparecer no estilo "default" e podem ser removidas. Tags removíveis têm um ícone de "X" para serem removidas do sistema.

O componente Autocomplete e o pattern de Filtros, que usam Tag, têm esse comportamento.

Boas práticas

• Todas as tags devem ter um texto, que pode ter também um ícone ou um botão de fechar, mas nunca apenas ícones
• O uso excessivo de Tag pode deixar a interface "poluída" e acabar dificultando a identificação de informações. Use sem exagero
• Tag, em geral, deve ter textos. Para exibir a contagem de alguma informação deve ser usado Badges
• Por padrão, a largura da Tag respeita o tamanho do rótulo. Se necessário, é possível "truncar" o rótulo
• Os rótulos da Tag nunca devem quebrar em duas ou mais linhas. Para exibir o rótulo completo da Tag, use Tooltip

Aplicações

Tabela de aplicações da Tag

Tag	Tipo	Texto	Aplicações
Rótulo da Tag	Default	Caixa alta (sistema) Case sensitive (usuário)	Tags de funcionalidades "BETA" (caixa alta). Tags adicionadas pelo usuário (case sensitive). Tags adicionadas pelo usuário poderão ser removidas.
RÓTULO TAG	Primary	Caixa alta	Tags de novas funcionalidades ou lançamentos do produto.
RÓTULO TAG	Positiva	Caixa alta	Você pode utilizar as Tags para dar um feedback positivo para as pessoas.
RÓTULO TAG	Negativa	Caixa alta	Também é possível aplicar a Tag para dar um feedback negativo e chamar atenção para uma ação crítica necessária.
RÓTULO TAG	Alertas	Caixa alta	É possível aplicar a Tag para dar um feedback de alerta e chamar atenção para uma ação importante.
RÓTULO TAG	Informativa	Caixa alta	Tags para informações adicionais ou de ajuda. Tags de features que só sejam acessíveis com upgrade de plano.

Feedback