O botão é um dos elementos de UI mais comuns e está presente em praticamente qualquer interface. Ele representa uma ação que o usuário pode tomar, como enviar um formulário, abrir uma nova página ou interagir com um sistema. Geralmente, os botões possuem rótulos descritivos e feedback visual para guiar a experiência do usuário.

Nesta aula veremos sobre a anatomia de um botão, tipos de botões mais comuns, quais seus estados (default, hover, focus, disabled, pressed), e como criar o componente de botão para seu Design System usando Figma.cha

Estados de um Botão

Os botões podem ter diferentes estados, cada um refletindo uma condição específica da interface:

1. Normal (Default): O estado padrão quando o botão está visível e pronto para interação.

2. Hover (Passagem do Mouse): Ocorre quando o usuário passa o mouse sobre o botão, geralmente acompanhado por uma alteração de cor, borda ou sombra para indicar interatividade.

3. Ativo (Pressed): Estado quando o botão está sendo pressionado, mudando ligeiramente seu estilo para indicar que a ação está em andamento.

4. Desabilitado (Disabled): Indica que a ação não está disponível, geralmente com uma aparência apagada e sem resposta a interação.

5. Carregando (Loading): Exibe um indicador visual (como um ícone de carregamento) para mostrar que uma operação está em andamento.

Tipos de Botões

Existem diferentes tipos de botões dependendo do contexto de uso:

• Botão Primário: Destacado para indicar a ação principal na tela.

• Botão Secundário: Menos chamativo, usado para ações menos importantes.

• Botão de Texto (Text Button): Sem fundo ou borda, usado para ações menos intrusivas.

• Botão de Ícone: Apresenta apenas um ícone em vez de texto, geralmente usado para ações rápidas.

• Botão Flutuante (FAB - Floating Action Button): Destacado e flutuante na interface, comumente usado para ações principais em aplicativos mobile.

Melhores Práticas no Design de Botões

• Clareza e Legibilidade: O texto do botão deve ser claro e direto, geralmente utilizando verbos de ação como "Enviar", "Salvar" ou "Continuar".

• Tamanho Adequado: Deve ser grande o suficiente para ser facilmente clicável, seguindo as diretrizes de acessibilidade.

• Contraste e Acessibilidade: Deve haver contraste suficiente entre o botão e o fundo para garantir visibilidade.

• Feedback Visual: Mudanças sutis nos estados ajudam a indicar interatividade e guiar o usuário.