Logotipo CamaraUX - Consultoria em UX Design
Ver currículo

Como escrever textos de botões

Aprenda a escrever rótulos de botões claros: use verbos, nomeie o resultado, diferencie ações e preserve a acessibilidade.

Wireframe de formulário com botão de ação destacado e fluxo concluído
Componente
Área
Tipo
Nível de impácto
Alto
Status
Recomendado
Nível de evidênica
Evidência moderada

Contexto

O texto do botão é parte da orientação da tarefa. Ele precisa dizer o que a pessoa fará ou o resultado que obterá, sem obrigá-la a adivinhar o efeito de uma ação genérica. Em um formulário, por exemplo, Salvar alterações informa mais do que Enviar; em um fluxo de compra, Continuar para o pagamento informa mais do que Continuar.

Um rótulo curto não precisa ser vago. A melhor escolha depende do contexto visível, da etapa, do objeto afetado e das outras ações disponíveis na mesma tela.

Escreva o rótulo para responder rapidamente: “o que acontece quando eu aciono este botão?”. Comece com um verbo de ação, como Salvar, Buscar, Baixar, Cadastrar, Excluir ou Continuar.

Nomeie o objeto ou destino quando houver ambiguidade, usando textos como Salvar alterações, Baixar relatório ou Continuar para o pagamento. Descreva o resultado real, e não apenas a mecânica técnica: prefira Cadastrar-se a Enviar quando o efeito for criar uma conta.

Diferencie ações parecidas no mesmo grupo. Prefira Salvar rascunho e Publicar em vez de dois botões com Salvar.

Use sentence case e mantenha o texto curto, retirando palavras que não ajudam a decidir. Reutilize os mesmos termos usados no título, na instrução e no feedback da etapa.

Preserve a essência do rótulo visível no nome acessível. Se houver repetição, acrescente o objeto para distinguir os controles.

Teste o botão fora do contexto ideal, em uma lista de nomes, com leitor de tela, zoom, teclado e reconhecimento de fala.

Regra prática

Se a pessoa consegue prever o resultado sem precisar ler o parágrafo inteiro da tela, o rótulo provavelmente está no caminho certo. Se ela precisa perguntar “enviar o quê?” ou “continuar para onde?”, acrescente o objeto ou destino.

Captura do Design System Gov.br mostrando exemplos de rótulos e tamanhos de botões
Exemplo real: o GOV.BR trata o rótulo como obrigatório no botão padrão e recomenda verbos de ação no infinitivo. A captura demonstra uma convenção de conteúdo do sistema, não uma regra universal. Fonte: Padrão Digital de Governo - Button: https://www.gov.br/ds/components/button

Porque isso importa?

Rótulos genéricos transferem para a pessoa o trabalho de interpretar o fluxo. Isso pode aumentar a hesitação, dificultar a comparação entre ações e levar a uma escolha errada. Em controles repetidos, Editar ou Excluir sem o objeto também pode ser insuficiente para quem navega pela lista com um leitor de tela.

O texto ainda participa do nome acessível do controle. Quando o nome visível e o nome programático divergem, pessoas que usam reconhecimento de fala ou leitor de tela podem não identificar o mesmo comando. Quando o botão descreve a ação e seu resultado, a interface fica mais previsível para diferentes formas de acesso.

  • Quando o botão inicia uma ação ou muda de etapa.
  • Quando o resultado da ação pode ser dito em poucas palavras.
  • Quando há duas ou mais ações próximas que precisam ser diferenciadas.
  • Quando o fluxo contém etapas como salvar, revisar, pagar ou publicar.
  • Quando o nome precisa funcionar também fora do contexto visual imediato.
  • Evite Ação, Clique aqui e rótulos sem significado.
  • Evite Enviar quando o efeito puder ser nomeado.
  • Evite Continuar sem destino claro em fluxos longos.
  • Evite perguntas, slogans e pontuação decorativa.
  • Evite transformar cada botão em uma frase explicativa.
  • Evite trocar o termo do botão sem trocar o termo usado no restante do fluxo.
Três botões do Adobe Spectrum com os rótulos Close, Connect to wifi e Agree
Exemplo real: o Adobe Spectrum contrasta rótulos que nomeiam a ação e o resultado com termos genéricos. A captura demonstra a orientação de usar verbos, sentence case e texto conciso. Fonte: Adobe Spectrum - Button: https://spectrum.adobe.com/page/button/

Recomendações

Faça

Práticas recomendadas
  • Comece com um verbo.
  • Nomeie o resultado.
  • Use termos do fluxo.
  • Diferencie ações próximas.
  • Mantenha o rótulo curto.
  • Teste sem contexto extra.
Wireframe com botão de ação específico destacado e fluxo concluído
Exemplo correto: rótulos curtos e específicos distinguem as ações do mesmo fluxo e indicam o resultado esperado.

Evite

Práticas a evitar
  • Usar Ação.
  • Usar Clique aqui.
  • Esconder o destino.
  • Repetir Enviar sem explicar.
  • Escrever slogans.
  • Usar só símbolos.
Wireframe com vários botões genéricos e caminhos de resultado indefinidos
Exemplo incorreto: rótulos genéricos e repetidos obrigam a pessoa a deduzir o efeito de cada botão.
Captura do USWDS recomendando textos curtos e rótulos de botões iniciados por verbos
Exemplo real: o USWDS recomenda começar o texto com um verbo e mostra rótulos como Download, View, Sign up e File a complaint. A captura demonstra clareza de ação em um design system governamental. Fonte: U.S. Web Design System - Button: https://designsystem.digital.gov/components/button/

Acessibilidade

Use o elemento semântico <button> para ações da própria interface e escreva um rótulo que comunique a função. O texto visível do botão deve participar do nome acessível; não substitua um rótulo claro por um nome programático genérico. Quando houver controles repetidos, acrescente o objeto ou o destino, como Excluir relatório mensal.

O Critério 2.5.3 da WCAG exige que o nome acessível contenha o texto visível do controle. Isso permite que pessoas que usam comando de voz encontrem e acionem o mesmo controle que veem na tela. Para botões com apenas ícone, siga a regra específica de ícones sem texto e forneça nome acessível adequado.

Valide também teclado, foco, contraste, estados de carregamento e mensagens após a ação. Um rótulo claro não corrige sozinho um botão sem foco ou sem feedback.

Checklist

  • O rótulo começa com uma ação?
  • O resultado está claro?
  • O objeto aparece quando necessário?
  • As ações próximas são diferentes?
  • O texto usa os termos do fluxo?
  • O rótulo é curto sem ficar vago?
  • O texto está em sentence case?
  • O nome acessível preserva o rótulo visível?
  • O botão funciona sem depender só de cor ou ícone?
  • A ação foi testada com teclado, zoom e leitor de tela?

Referências

  • W3C WAI-ARIA APG: Accessible Names and Descriptions. Recomenda preferir texto visível, nomes curtos e distintos e colocar as palavras mais importantes primeiro. Consultar nomes e descrições acessíveis.
  • W3C WCAG 2.2: Label in Name. Exige que o nome acessível contenha o texto visível do controle, requisito especialmente relevante para reconhecimento de fala. Consultar o Critério 2.5.3.
  • Baymard Institute: Specifying UI Elements Using “Names”. Mostra que o nome programático deve preservar a essência do rótulo visível e pode acrescentar contexto, como Continue to Checkout. Consultar a pesquisa sobre nomes de elementos.
  • Baymard Institute: Avoid “Apply” Buttons. Apresenta um benchmark específico de checkout e recomenda evitar Apply quando a ação puder ser aplicada automaticamente. A conclusão é contextual e não deve ser generalizada para todo tipo de interface. Consultar a pesquisa sobre botões Apply.
  • U.S. Web Design System: Button. Orienta usar texto curto, sentence case, palavras de ação e começar com verbo, com exemplos como Download, View, Sign up e File a complaint. Consultar o componente Button.
  • Padrão Digital GOV.BR: Button. Trata o rótulo como obrigatório no botão padrão e recomenda verbos de ação no infinitivo, como Entrar, Cancelar, Cadastrar e Anexar. Consultar o componente Button.
  • Adobe Spectrum: Button. Orienta escrever rótulos como verbos, comunicar claramente o resultado da ação, usar sentence case e manter o texto conciso. Consultar o componente Button.
  • GOV.UK Design System: Button. Diferencia rótulos como Continue, Save and continue, Confirm and send e Accept and send conforme o comportamento real do serviço. Consultar o componente Button.
Veja também

Esta recomendação foi útil para você?