Botões iniciam ações instantâneas ou permitem que o usuário faça escolhas em diálogos. Eles comunicam o que acontecerá após o clique e devem ser visualmente distintos para indicar interatividade.
| Variante |
Uso Recomendado |
Regra de UX Writing |
| Control/Default |
Opções ou ações neutras. |
Use verbos diretos: Editar, Visualizar. |
| Primary |
Ação principal da página ou formulário (máx. 1 por tela). |
Foque no objetivo: Salvar, Continuar. |
| Primary Outline |
Ações secundárias importantes, mas não essenciais. |
Use para ações de suporte: Exportar, Imprimir. |
| Danger |
Ações destrutivas ou irreversíveis. |
Seja explícito: Excluir Registro, Cancelar Carga. |
| Success |
Conclusão de fluxos positivos e finais. |
Use para fechamento: Registrar Entrega. |
| Text/Transparent |
Ações de baixa prioridade ou botões de ícone. |
Rótulos curtos ou apenas ícones com tooltip. |
|
|
|
- Seja Breve: O rótulo deve ter preferencialmente uma ou duas palavras.
- Ruim: Clique aqui para emitir a nota.
- Melhor: Emitir Nota
- Vá Direto ao Ponto: Use verbos no infinitivo que descrevam a ação.
- Caixa de Título: Todos os botões devem seguir a regra de capitalização de título.
- Exemplo: Gerar Relatório (e não “Gerar relatório”).
- Uso de Reticências (…): Se o botão abrir uma nova janela ou exigir mais entradas antes de concluir a ação, use reticências.
- Exemplo: Configurar Filtros… ou Imprimir…
- Evite Repetição: Se o título da seção é “Motoristas”, o botão não precisa dizer “Adicionar Motorista”, apenas Adicionar.
| Contexto Logístico |
Estilo Incorreto |
Estilo UX (Correto) |
| Exclusão de Rota |
Tem certeza que quer apagar? |
Excluir Rota (Botão Danger) |
| Finalizar Processo |
Eu quero confirmar a entrega |
Confirmar Entrega (Botão Success) |
| Busca |
Procure aqui o seu pedido |
Pesquisar (Botão Control) |