Contexto
Links e botões podem receber estilos parecidos, especialmente em chamadas para ação, cards e interfaces de aplicações. A aparência, porém, não define o comportamento do controle. Um link representa navegação para um destino; um botão representa uma ação executada na página, em um formulário ou sobre outro componente.
Quando a semântica é trocada apenas para facilitar o estilo ou o JavaScript, a interface pode perder comportamentos esperados: abrir o destino em outra aba, copiar ou salvar o endereço, usar o menu de contexto, responder às teclas corretas e ser anunciada com o papel adequado por tecnologias assistivas.
Classifique a intenção da interação antes de escolher o componente. Se existe um destino que pode ser representado por uma URL, use um link. Se a interação modifica o estado atual ou dispara uma operação, use um botão.
Use um link para navegação, preferindo <a href="..."> para abrir outra página, outra área do site, uma posição na mesma página, um documento, um download ou um endereço de e-mail e telefone.
Use um botão para ações da própria interface, como enviar formulário, salvar, excluir, abrir modal, abrir menu, expandir conteúdo, alternar estado ou executar uma operação sem mudar o destino.
Separe semântica de aparência. Um link pode receber aparência de botão quando a navegação for a chamada principal. Um botão pode receber aparência mais discreta quando a ação for secundária. O HTML deve continuar refletindo a intenção.
Preserve os comportamentos nativos. Não substitua um link por um elemento genérico com JavaScript nem transforme um link em botão com href="#". Também não use um botão com onclick para simular navegação quando existe uma URL.
Escolha o tipo correto do botão. Dentro de um formulário, use type="submit" para enviar e type="button" para uma ação que não deve submeter os dados. Use type="reset" somente quando o reset for realmente compreensível e necessário.
Escreva um nome claro. O texto deve indicar o destino do link ou o resultado da ação do botão. Evite “clique aqui”, “saiba mais”, “enviar” sem contexto e rótulos que dependam apenas de um ícone.
Teste a interação real verificando mouse, teclado, leitor de tela, menu de contexto, copiar endereço, abrir em nova aba, foco, estados e comportamento sem JavaScript quando aplicável.
Regra prática
Se a pessoa vai para algum lugar, use link. Se algo acontece onde ela está, use botão. Se um componente visual aceita uma URL, ele deve renderizar um link por baixo; se dispara uma ação, deve renderizar um botão.
Base da recomendação
O HTML e o WAI-ARIA APG distinguem a navegação de um link da ação de um controle. MDN documenta que um <a> com href cria um hiperlink e que links falsos com # ou javascript:void(0) devem ser substituídos por <button>. Primer reforça a mesma distinção e alerta que aparência de link ou botão não deve substituir a semântica correta. Spectrum e GOV.BR mostram como sistemas de design aplicam essa separação em componentes e estados. A recomendação é forte para a escolha semântica, mas o estilo, o texto e a hierarquia visual dependem do contexto do produto.
Porque isso importa?
O elemento escolhido informa ao navegador, às tecnologias assistivas e a outros mecanismos de interação o que a pessoa pode esperar. Um link nativo oferece recursos de navegação, como copiar o destino, abrir em outra aba e usar o histórico. Um botão nativo comunica uma ação e participa de formulários e controles de estado.
Quando um botão é usado para navegar, a pessoa pode perder recursos do navegador e encontrar um comportamento diferente do esperado. Quando um link é usado para abrir um modal, salvar ou alternar um painel, o papel, as teclas, o menu de contexto e o anúncio para leitor de tela podem ficar inconsistentes.
Quando usar?
- Use link para outra página ou tela com URL própria.
- Use link para uma seção da mesma página.
- Use link para documento, download, e-mail ou telefone.
- Use botão para enviar, salvar, excluir ou atualizar dados.
- Use botão para abrir modal, menu, popover ou painel.
- Use botão para expandir, recolher ou alternar um estado.
Quando evitar?
- Evite botão com JavaScript para substituir uma URL.
- Evite link com
href="#"para executar uma ação. - Evite
role="button"ourole="link"como primeira opção. - Evite decidir pelo formato visual antes da semântica.
- Evite “clique aqui” sem destino ou ação explícita.
- Evite remover o foco para esconder a diferença entre controles.
Recomendações
Faça
- Defina primeiro: destino ou ação.
- Use
<a href>para navegar. - Use
<button>para agir. - Escolha a aparência depois.
- Escreva destino ou resultado.
- Preserve foco e teclado.
Evite
- Usar botão como link.
- Usar link como botão.
- Depender de
href="#". - Depender só de JavaScript.
- Confiar apenas na aparência.
- Esconder o nome da interação.
