Botões

Em produção

Botões comunicam ações que os usuários podem realizar. Eles são, possivelmente, o componente interativo mais importante de qualquer interface.

Hierarquia

Uma tela com muitos botões "chamativos" cria confusão. A hierarquia visual deve guiar o usuário para a ação principal.

Ação Principal

Destaque máximo. Deve haver (idealmente) apenas um por contexto/seção. É o "Happy Path" que queremos que o usuário siga.

Cancelar

Apoio ou alternativa. Visível, mas sem competir com a ação principal. Usado para "Cancelar", "Voltar" ou ações secundárias.

Ver detalhes

Menor prioridade. Sem borda ou fundo até o hover. Usado para ações repetitivas ou contextuais que não devem poluir a tela.

Como elemento interativo, o botão deve responder a cada gesto do usuário.

Hover: Indica "sou clicável".
Active/Pressed: Feedback físico simulado do clique.
Focus: Anel visível para navegação via teclado.
Disabled: Inativo. Use com cuidado; às vezes é melhor ocultar o botão ou deixá-lo ativo e explicar o erro ao clicar.
Loading: Feedback imediato após o clique, prevenindo submissões duplicadas.

Labels devem ser verbos ou ações claras (ex: "Salvar alterações" em vez de "Sim").
Não use botões para navegação de página (use links). Botões mudam estado ou enviam dados; Links mudam o local.
Respeite a área de toque mínima (44px/48px) em dispositivos móveis, mesmo para botões pequenos visualmente.