Contexto
Ícones podem acelerar o reconhecimento de uma ação, mas não são uma linguagem universal. O texto torna a intenção mais explícita, ajuda pessoas que usam comando de voz e reduz a dependência de memória ou interpretação visual.
Por isso, não existe uma regra universal dizendo que todo botão deve ter ícone ou que todo botão deve exibir apenas texto. A decisão depende da familiaridade da ação, do contexto, do espaço disponível, do público e do risco associado.
Use texto junto ao ícone quando a ação for pouco familiar, importante, destrutiva, complexa ou sujeita a interpretações diferentes.
Use apenas ícone em ações muito conhecidas, recorrentes e compactas, desde que o botão tenha nome acessível, foco visível e comportamento compreensível.
Escolha primeiro o nome da ação. O ícone deve reforçar o significado, não substituir um rótulo necessário.
Mantenha a mesma função com o mesmo nome e padrão visual em toda a interface.
Porque isso importa?
Um botão precisa comunicar o que acontecerá após sua ativação. A pesquisa aplicada da Baymard destaca a importância de microcopy descritiva, consistência e diferenciação visual para que as pessoas compreendam a intenção dos botões. Seus resultados são especialmente contextualizados para e-commerce.
Para acessibilidade, o botão precisa ter nome, função e estado identificáveis programaticamente. A WCAG 2.2 exige que essas informações estejam disponíveis para tecnologias assistivas.
Quando existe texto visível, o nome acessível deve conter esse texto. Isso permite que pessoas que usam comando de voz acionem o botão pelo rótulo que enxergam.
Quando usar?
Use ícone e texto quando a ação não for imediatamente reconhecível, quando o botão estiver em uma tela pública ou para públicos variados, quando a ação tiver consequência importante, quando houver várias ações próximas ou quando o ícone puder ter interpretações diferentes.
O texto também é preferível quando a interface precisa funcionar sem depender de tooltip ou quando o rótulo ajuda na tradução e na compreensão do fluxo.
Quando evitar?
Considere usar apenas o ícone quando a ação for muito familiar, o contexto tornar a função evidente, o padrão for repetido em uma barra de ferramentas e o espaço for realmente limitado.
Mesmo nesses casos, o botão precisa ter nome acessível, foco visível e comportamento testado com pessoas do público.
Evite o botão somente com ícone quando a pessoa precisar passar o mouse para descobrir sua função, quando o símbolo for ambíguo ou quando a ação envolver perda de dados, dinheiro, privacidade ou acesso.
Recomendações
Faça
- Escreva a ação.
- Use o ícone como apoio.
- Mantenha nomes consistentes.
- Garanta nome acessível.
- Teste compreensão.
- Considere tradução.
Evite
- Não use ícone ambíguo.
- Não dependa só de tooltip.
- Não troque o nome da ação.
- Não misture padrões sem motivo.
- Não esconda o foco.
- Não trate ícone como decoração.
