Emblema
Os emblemas servem para mostrar uma pequena quantidade de metadados categorizados por cores;
Eles são ideais para chamar a atenção do usuário.
Opções
# Etiqueta
- Os emblemas devem sempre ter uma etiqueta para acessibilidade e compreensão clara;
- Quando a etiqueta não é definida, o emblema passa a ser apenas um ícone.
# Ícone
- Um emblema pode ter um ícone opcional;
- Use reticências no final do texto da etiqueta para comunicar que o processo está em andamento;
- Se nenhuma etiqueta for usado, um emblema se tornará apenas um ícone e deverá incluir um ícone;
- Um emblema somente de ícone é melhor para espaços muito pequenos e deve sempre incluir uma dica de ferramenta ao passar o mouse para fornecer mais contexto para o significado do ícone.
# Tamanho
- Os emblemas vêm em quatro tamanhos diferentes: pequeno, médio, grande e extragrande;
- O tamanho pequeno é a opção padrão e usada com mais frequência;
- Use os outros tamanhos com moderação para criar uma hierarquia de importância em uma página.
# Variantes semânticas
- Quando os emblemas têm um significado semântico, eles usamcores semânticas. Use essas variantes para os seguintes status:
- Positivo (por exemplo, aprovado, completo, sucesso, novo, adquirido, licenciado)
- Informativo (por exemplo, ativo, em uso, ao vivo, publicado)
- Negativo (por exemplo, erro, alerta, rejeitado, falhado)
- Neutro (por exemplo, arquivado, excluído, pausado, rascunho, não iniciado, finalizado)
# Variantes não semânticas
- Quando os emblemas são para categorias codificadas por cores, eles usam informações não semânticas;
- Variantes não semânticas são usadas idealmente quando há 8 categorias ou menos.
# Fixo
- Os emblemas podem ser colocados flutuando em um contêiner ou podem ser fixados em qualquer borda de um contêiner;
- Eles perdem o arredondamento de canto padrão na aresta fixa.
Comportamentos
# Estouro de texto
- Quando a etiqueta de um emblema é muito longa para o espaço horizontal disponível, ela se dobra para formar outra linha;
- Se não houver espaço para uma segunda linha de texto, o emblema deverá ser truncado e incluir uma dica de ferramenta para expor o texto completo ao passar o mouse.
Diretrizes de uso
# Não exiba vários emblemas
- Os emblemas têm como objetivo oferecer um contexto rápido sobre a qual categoria, status ou significado um item está associado. Se o seu design exigir vários emblemas, considere usar metadados de texto regulares e reserve um único emblema apenas para o status, categoria ou significado mais importante.