Sistema de Botões e Ações

O que Sistema de Botões e Ações faz?

Propósito

O Sistema de Botões e Ações fornece uma metodologia para projetar os principais condutores da interação do usuário. Botões são o elo fundamental entre a intenção do usuário e a resposta do sistema. Este sistema garante que cada ação seja visualmente priorizada (Hierarquia), estilizada de forma consistente (Coesão) e fácil de interagir em todos os dispositivos (Usabilidade). Ele vai além de "criar um botão" para definir uma estrutura lógica de como diferentes tipos de ações se relacionam dentro de um layout.

Casos de Uso

• Definir uma biblioteca de componentes de botão para um design system.
• Estabelecer uma hierarquia de ações em uma seção Hero ou Cabeçalho de Página.
• Organizar grupos de ações relacionadas (por exemplo, Salvar, Cancelar, Excluir).
• Projetar gatilhos especializados como botões apenas com ícone ou botões de ação flutuante (FABs).
• Padronizar a relação entre tamanhos de botão e densidade de layout.

Quando NÃO Usar

• Links de Navegação Global: Para navegar entre seções principais do site, use sistema-de-navegacao-do-site.
• Hiperlinks no Texto: Para links incorporados em um parágrafo de texto que levam a mais informações, use tratamentos de tipografia padrão.
• Elementos Puramente Decorativos: Não use estilos de botão para elementos que não podem ser clicados ou tocados.
• Inputs de Formulário Complexos: Para selecionar opções (Caixas de Seleção, Botões de Rádio, Menus Suspensos), use sistema-de-design-de-formularios.

Entradas

1. Prioridade da Ação: A tarefa é Primária (Nível 1), Secundária (Nível 2) ou Terciária (Nível 3)?
2. Gravidade da Ação: A ação é "Positiva" (Enviar), "Neutra" (Cancelar) ou "Destrutiva" (Excluir)?
3. Densidade Contextual: Onde o botão está inserido? (por exemplo, um Hero espaçoso vs. uma linha compacta de Tabela de Dados).
4. Tokens da Marca: Paleta de cores, escala tipográfica e preferências de raio de borda.

Saídas

1. Matriz de Variantes de Botão: Estilos definidos para as variantes Primário, Secundário, Fantasma e Perigo.
2. Escala de Tamanhos: Uma gama de alturas e preenchimentos (por exemplo, Pequeno, Médio, Grande).
3. Especificação da Anatomia: Regras de espaçamento interno para texto, ícones e contêineres.
4. Regras de Agrupamento de Ações: Diretrizes para alinhamento, ordem e espaçamento entre vários botões.

Fluxo de Trabalho

1. Estabelecer a Hierarquia de Variantes

Atribua pesos visuais aos botões com base em sua importância para o objetivo do usuário:

• Primário (Nível 1): Fundo preenchido de alto contraste. Geralmente o objetivo "principal" da página. Apenas um por visualização.
• Secundário (Nível 2): Fundo contornado ou de baixo contraste. Usado para ações alternativas ou de suporte.
• Terciário/Fantasma (Nível 3): Sem fundo ou borda em seu estado padrão. Usado para tarefas de baixa prioridade ou dentro de IUs densas (como tabelas).
• Perigo: Cor de alto contraste (geralmente Vermelho). Usado estritamente para ações destrutivas e permanentes.

2. Definir a Escala de Tamanhos

Mapeie as dimensões do botão para o contexto do layout usando o sistema-de-espacamento-fluido:

• Grande (Hero/Landing): Máxima proeminência. Alto preenchimento vertical.
• Médio (Padrão): O padrão para formulários, modais e cabeçalhos.
• Pequeno (Compacto): Usado em barras laterais, cartões e tabelas de dados onde o espaço é limitado.

3. Projetar a Anatomia Interna

Padronize a estrutura do contêiner do botão:

• Preenchimento: Mantenha uma proporção consistente entre horizontal e vertical (geralmente horizontal = 1,5x a 2x vertical).
• Integração de Ícone: Defina o espaço entre um ícone e o texto (por exemplo, --espaco-xs).
• Raio de Borda: Determine o "arredondamento" (Reto, Arredondado ou Pílula) para combinar com o tom visual da marca.

4. Criar Grupos de Botões

Ao colocar várias ações juntas, siga uma ordem lógica:

• Ordem: Coloque a ação Primária na posição de "conclusão" (Direita no desktop, Topo em uma pilha vertical no celular).
• Espaçamento: Use um espaço consistente (por exemplo, --espaco-s) entre os botões em um grupo.
• Alinhamento: Alinhe à direita as ações em modais/cabeçalhos; alinhe à esquerda em formulários; centralize em Heros.

5. Definir Comportamento Responsivo

Garanta que as ações permaneçam utilizáveis em todas as viewports:

• Botões de Largura Total (Bloco): No celular, botões pequenos geralmente se expandem para preencher a largura do contêiner para facilitar o alcance do polegar.
• Fallback Apenas com Ícone: Em cabeçalhos extremamente compactos, os rótulos de texto podem ser ocultados em favor de ícones (garanta que aria-label esteja presente).

Regras de Decisão

• A Regra do "Único Primário": Deve haver apenas um botão Primário (Nível 1) visível em qualquer viewport/contexto para evitar "paralisia de escolha".
• Fantasma vs. Link: Use um botão Fantasma quando a ação for funcional (por exemplo, "Fechar," "Cancelar"); use um link de texto quando a ação for de navegação (por exemplo, "Saiba mais sobre nossa política").
• Posicionamento do Ícone: Use um ícone à esquerda (Leading) para esclarecer a ação (por exemplo, um ícone de Pesquisa); use um ícone à direita (Trailing) para indicar direção (por exemplo, uma Seta para "Próximo Passo").
• Contraste para Perigo: Botões destrutivos devem parecer significativamente diferentes dos botões Primários para evitar cliques acidentais.

Restrições

• Acessibilidade: O texto deve atender ao contraste WCAG AA (4,5:1). Elementos interativos devem ter um estado focus claro (veja sistema-de-estados-interativos).
• Alvos de Toque: Todos os botões devem ter uma área interativa mínima de 24x24px (WCAG 2.2 SC 2.5.8), mesmo que o elemento visual seja menor; use 44x44px como padrão confortável para ações primárias e layouts mobile.
• Truncamento: O texto do botão nunca deve ser truncado. Se o rótulo for muito longo, reavalie o texto ou permita que o botão quebre/expanda.

Padrões de Falha Comuns

• Sopa de Botões: Usar 3-4 botões Primários em uma página, o que dilui a importância do CTA principal.
• A "Zona Cinzenta": Fazer botões parecerem elementos desabilitados por falta de contraste ou cor.
• Interação Ausente: Falha ao definir estados hover ou active, deixando o usuário incerto se o clique foi registrado.
• Alvos Minúsculos: Projetar botões fantasmas pequenos e apenas com texto que são quase impossíveis de acertar em uma tela mobile.
• Alinhamento Confuso: Misturar diferentes alinhamentos de botão no mesmo fluxo, forçando o usuário a "caçar" a próxima ação.

Critérios de Validação

• Toda página/visualização tem uma ação Primária clara.
• As variantes de botão (Primário, Secundário, Fantasma, Perigo) são usadas de forma consistente.
• Os botões atendem ao alvo de toque mínimo de 24x24px do WCAG 2.2 (2.5.8), com 44x44px usado para ações primárias e mobile.
• A hierarquia visual é mantida quando os botões são agrupados.
• Os estados de foco são distintos e de alto contraste.
• Os rótulos dos botões são concisos e usam "Verbos de Ação" (por exemplo, "Salvar," "Criar," "Participar").
• As viewports mobile usam botões de largura total quando apropriado para acessibilidade.