Pular para o conte√ļdo principal

Tag

Vis√£o geral#

Este componente é indicado para os casos em que é necessário informar, rotular, chamar atenção ou categorizar itens. Permitem um rápido reconhecimento pelo uso de palavras-chave, ícones ou cores.

As tags ajudam a destacar informa√ß√Ķes importantes e apoiam na categoriza√ß√£o,¬†tamb√©m rotulam visualmente os itens com pequenas quantidades de informa√ß√Ķes ou destacam o status, geralmente com palavras-chave concisas que ajudam a identificar os itens. Podem ou n√£o conter √≠cones para apoiar na identifica√ß√£o da tag.

Tipos#

Pensando nos diversos cen√°rios de uso, h√° duas categorias de tags: leitura e interativa.

  • Tag de leitura: traz a informa√ß√£o de forma est√°tica, sem possibilitar qualquer tipo de intera√ß√£o;
  • Tag interativa: traz a informa√ß√£o e possui intera√ß√£o em si, podendo ser removida.

Boas pr√°ticas#

As tags (leitura e interativa) s√£o estruturadas com base em padr√Ķes de usabilidade para contribuir com uma boa experi√™ncia. Por isso, ao aplicar esse componente, √© muito importante que sejam levados em considera√ß√£o alguns crit√©rios e pr√°ticas:

  • Use tags quando o conte√ļdo for mapeado para v√°rias categorias e o usu√°rio precisar de uma maneira de diferenci√°-las.
  • A label da tag costuma ser sempre um¬†adjetivo ou substantivo, n√£o um verbo.
  • As tags devem sempre incluir uma label. Eles podem representar termos de pesquisa, filtros ou palavras-chave.
  • N√£o use apenas a cor para transmitir informa√ß√Ķes porque n√£o √© acess√≠vel. Se voc√™ usar a mesma tag em mais de um lugar, certifique-se de manter a cor consistente.
  • As tags podem aumentar a quantidade de ru√≠do visual em uma tela, principalmente quando combinadas com outros elementos visuais, portanto, use-as com modera√ß√£o.
  • N√£o misture tags interativas e est√°ticas.Depois de estabelecer um padr√£o de comportamento das tags, os usu√°rios sempre esperam esse comportamento.
  • A tag nunca deve ter mais de uma linha, por isso temos que usar termos curtos e claros.