Botões (Buttons)

Os botões são elementos interativos que representam ações claras e diretas ao usuário. No Acronos Design System, os botões são projetados para atender diferentes contextos e níveis de hierarquia visual.

Tipos de Botões

1. Primary (Primário)

   • Uso: Representa a ação principal de uma interface.

   • Cor: Usa a cor primária da plataforma para se destacar.

2. Secondary (Secundário)

   • Uso: Ações secundárias em uma tela. Ideal para complementar o botão primário.

   • Cor: Neutra, oferecendo contraste suave.

3. Tertiary (Terciário)

   • Uso: Ações menos importantes ou links interativos. Composto apenas por texto clicável.

   • Cor: Texto na cor padrão do tema.

Tamanhos e Termos

Os botões Primário e Secundário estão disponíveis nos seguintes tamanhos, com os termos em inglês e português:

• Small (Pequeno)

  • Usado em contextos compactos, como tabelas ou barras de ferramentas.

  • Altura: 36px.

  • Padding horizontal: 12px.

• Medium (Médio)

  • Tamanho padrão para a maioria das interfaces.

  • Altura: 40px.

  • Padding horizontal: 20px.

• Large (Grande)

  • Usado em situações que exigem maior ênfase, como CTAs principais.

  • Altura: 48px.

  • Padding horizontal: 24px.

• Fill (Expandido)

  • O botão ocupa 100% da largura do container pai.

  • Disponível em todos os tamanhos.

Botões com Ícones (Icon Buttons)

1. Descrição

   • Botões redondos usados para ações simples, geralmente com um único ícone.

   • Seguem as cores Primária ou Secundária da plataforma.

2. 
   

   • Medium (Médio): 40px x 40px.

Pills (Pílulas)

1. Descrição

   • Botões em formato oval, usados para ações rápidas ou filtros.

   • Seguem as cores Primária ou Secundária da plataforma.

2. Tamanhos

   • Small (Pequeno): Altura de 24px, largura adaptável ao conteúdo.

Estados Interativos

Todos os botões possuem os seguintes estados, representados visualmente:

• Default (Padrão): Estado inicial do botão.

• Hover (Passar o mouse): Mudança de cor/leve animação ao passar o cursor.

• Active (Ativo): Feedback visual ao clicar no botão.

• Disabled (Desativado): Botão inativo, sem interação possível.

Comportamento Responsivo

• Em telas menores (mobile), o botão Fill (Expandido) deve ser usado como padrão para botões principais.

• Para tablets ou desktop, os tamanhos Medium (Médio) e Large (Grande) são mais adequados.

Boas Práticas

• Sempre priorize o uso de Primary (Primário) para a ação principal de uma interface.

• Evite misturar muitos estilos de botões na mesma tela.

• Mantenha os botões com textos curtos e objetivos.

• Use ícones apenas quando forem claros e autossuficientes para comunicar a ação.