Contexto
Quando uma tela oferece mais de uma ação, as pessoas precisam identificar rapidamente qual caminho representa o objetivo principal e quais opções são alternativas, apoio ou cancelamento.
Este padrão complementa a orientação sobre hierarquia entre botão primário e secundário e se concentra em posição, alinhamento e ordem. Esses fatores devem trabalhar juntos, mas não existe uma posição universal válida para todos os contextos: formulários, páginas completas, modais, painéis laterais e fluxos em etapas podem exigir arranjos diferentes.
Defina primeiro a ação principal pelo objetivo da tarefa, não pela posição ou pela cor do botão.
Use apenas uma ação de alta ênfase por contexto. As demais devem ter menor destaque visual.
Em formulários de página, mantenha o grupo de ações no final do conteúdo e alinhado ao início do formulário quando esse for o padrão do produto. Para organizar o fluxo, consulte também como escrever textos de botões.
Em modais, painéis laterais e fluxos progressivos, a ação principal pode ficar à direita ou ocupar a posição inferior quando os botões forem empilhados.
Coloque a ação secundária próxima da principal, mas com menor ênfase. Mantenha a mesma lógica em telas equivalentes.
No mobile, preserve a ordem lógica e deixe a ação mais importante facilmente alcançável. Quando os botões forem empilhados, a ação principal deve aparecer na posição final do grupo.
Porque isso importa?
A hierarquia visual ajuda a pessoa a reconhecer o próximo passo e reduz a competição entre ações. A Carbon recomenda uma única ação de alta ênfase por contexto e orienta que o posicionamento varie conforme o tipo de interface.
O Design System GOV.BR também relaciona a ênfase visual à importância da ação e documenta uma regra própria de posicionamento: a ação de maior relevância fica à direita em grupos horizontais e abaixo quando os botões são empilhados. Essa é uma convenção contextual do sistema, não uma regra universal.
A Apple recomenda destacar visualmente a ação mais provável, limitar a quantidade de botões de alta ênfase e escolher a posição conforme o papel e o contexto da interface.
Em e-commerce, a Baymard relaciona destaque, posicionamento consistente e microcopy descritiva à identificação da próxima etapa. Seus resultados devem ser transferidos com cuidado para contextos fora de checkout.
Para a ordem de leitura e navegação, relacione esta decisão ao padrão de foco de teclado.
Quando usar?
Use essa estrutura quando houver uma ação principal e uma ou mais alternativas, quando a pessoa precisar avançar, salvar ou concluir uma tarefa, quando existir uma ação secundária como cancelar, voltar ou revisar e quando várias telas semelhantes precisarem manter o mesmo padrão.
O padrão também é útil em fluxos com etapas, modais, painéis laterais e formulários. Em modais, combine a decisão com o fechamento correto do modal; em formulários longos, avalie quando dividir o fluxo em etapas.
Quando evitar?
Evite dois botões com a mesma alta ênfase, mudar a posição da ação principal sem motivo, dar destaque primário a cancelar ou voltar e colocar ações sem relação no mesmo grupo.
Não dependa apenas da cor para comunicar prioridade nem fixe os botões no topo de um formulário longo sem relação clara com o conteúdo.
Recomendações
Faça
- Defina uma ação principal.
- Use menor ênfase nas alternativas.
- Agrupe ações relacionadas.
- Mantenha a posição consistente.
- Termine com a ação principal no mobile.
- Escreva rótulos objetivos.
Evite
- Não destaque duas ações igualmente.
- Não misture ações sem relação.
- Não mova o botão sem motivo.
- Não destaque cancelar como principal.
- Não dependa só de cor.
- Não esconda ações no topo.
