← Voltar para todos os desafios

Dia 4: Botões e seus estados

Botões são os principais pontos de ação da sua interface. Vamos aprender a dar a eles uma "personalidade" para cada interação.

Mais que retângulos: a função de um botão

Um botão tem um propósito claro: sinalizar ao usuário que uma ação específica acontecerá se ele for clicado. Por isso, a clareza é fundamental. O texto de um botão (seu "rótulo" ou "label") deve ser um verbo que descreve a ação: "Salvar", "Enviar", "Cancelar", "Comprar". Evite textos genéricos como "Ok" sempre que possível.

A anatomia de um bom botão

Para comunicar a importância de uma ação, usamos diferentes estilos de botões. Os três tipos principais são:

Primário: A ação mais importante da tela. Geralmente tem uma cor de fundo sólida e vibrante para atrair o máximo de atenção.
Secundário: Uma ação alternativa. Costuma ter um estilo mais sutil, como apenas uma borda ou um fundo de cor clara.
Terciário (ou de Texto): Para ações de baixa prioridade. Geralmente é apenas um texto com a cor primária, sem bordas ou fundo.

Os 5 estados que todo botão deveria ter

Um botão não é estático; ele reage ao usuário. Projetar seus diferentes "estados" é essencial para dar feedback e criar uma experiência interativa e clara.

Default (Padrão): A aparência normal do botão, antes de qualquer interação.
Hover (Mouse Sobre): Um feedback visual sutil (ex: cor levemente mais escura, sombra suave) que aparece quando o cursor do mouse está sobre o botão, indicando que ele é clicável.
Active (Pressionado): A aparência do botão no exato momento do clique. Geralmente, uma cor mais escura ou um leve "afundamento".
Focus (Em Foco): Essencial para acessibilidade. É um anel (outline) que aparece ao redor do botão quando ele é selecionado via teclado (usando a tecla Tab).
Disabled (Desabilitado): A aparência do botão quando a ação não pode ser realizada (ex: um botão "Enviar" antes de um formulário ser preenchido). Geralmente é acinzentado e com baixa opacidade.

Vídeos para dar o clique no seu cérebro

Veja na prática como criar e organizar esses componentes e seus estados no Figma.

Como criar BOTÕES no Figma (Canal Kevin Power)

Seu desafio de hoje: O ciclo de vida de um botão

Sua missão é criar dois tipos de botões e todas as suas variações de estado, um passo fundamental para qualquer Design System.

Checklist do desafio:

Desenhe um botão Primário (ex: "Confirmar Pagamento").
Desenhe um botão Secundário (ex: "Voltar para a loja").
Para ambos os botões, crie as 5 variantes de estado: Padrão, Mouse sobre, Pressionado, Em foco e Desabilitado.
Organize todos os 10 botões resultantes em uma grade para apresentar seu trabalho.