Botão

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

1. 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.

2. 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.

3. 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.