Trailing icon (icone final)

Icone no fim de um elemento que da contexto, indica acao ou estado.

Hard

O que é

Trailing icon e o icone posicionado no fim de um elemento, como um botao, um item de lista ou um campo de texto, e ele serve pra sinalizar contexto extra, uma acao ou um estado. Um item de lista com seta no fim, por exemplo, diz que da pra expandir ou navegar a partir dali.

O contraste mais util e com o leading icon, que e o icone do comeco. O leading identifica o elemento, como o icone de pasta antes do nome do arquivo, enquanto o trailing nao define o elemento: ele estende o sentido ou aponta o proximo passo. E o caso da seta pra baixo num botao Baixar, do X de limpar num campo ou do olho de mostrar senha.

O principal cuidado aqui e a clareza. O icone precisa ser reconhecivel ou ter tooltip, porque usar a seta ora pra navegar, ora pra abrir dropdown, acaba confundindo. E ele tambem precisa de rotulo pro leitor de tela e de tamanho de alvo suficiente sempre que funcionar como botao.

Em uma frase

O campo de senha ganha um trailing icon de olho no fim, porque ele estende a acao, nao identifica o campo.

A pergunta que ele responde

Onde coloco o icone que indica a acao do campo: no comeco ou no fim?

Quando usar

Faz sentido pra sinalizar acao secundaria ou proximo passo dentro do proprio elemento, sem poluir a interface.

Como não usar

O cuidado e nao usar simbolo vago ou inconsistente, e nao esquecer o rotulo e o tamanho de alvo quando o icone funciona como botao.

Na prática

Pense num campo de senha que ganha um trailing icon de olho, usado pra mostrar e esconder o que foi digitado. O icone esta no fim do campo justamente porque estende a acao, sem identificar o campo.

Não confunda com

Vale separar trailing icon de leading icon. O leading fica no comeco e identifica o elemento, enquanto o trailing fica no fim e estende o sentido ou aponta o proximo passo. Ou seja, um diz o que aquilo e, e o outro diz o que da pra fazer com aquilo.

D

Em inglês

Trailing Icon

Pronúncia

trei-ling ai-con

Também chamado de

trailing icon, icone final, icone a direita

Origem

n/a

Fonte

Saiba mais

Material Design, documentacao sobre leading e trailing icons