Botões

Os botões são o principal indicador visual das ações de um usuário.

Princípios

Orientados para ação: os botões precisam comunicar claramente que acionam uma ação.

Feedback claro: a aparência do botão precisa mudar de forma distinta em diferentes estados de interação (passar o cursor, pressionar, foco) para fornecer feedback imediato.

Consistência: todos os botões precisam compartilhar uma linguagem visual principal para serem reconhecidos instantaneamente.

Flexível: o componente de botão precisa acomodar variações comuns, como incluir ícones e tamanhos diferentes, sem sacrificar a consistência.

Uso e posicionamento

Um botão precisa ser colocado perto do conteúdo relevante. Eles podem ser colocados sozinhos ou com outros componentes, como cards e listas.

check_circle

O que fazer

Use a divulgação progressiva para revelar ações menos relevantes.

cancel

O que não fazer

Sobrecarregar a visualização do usuário com muitos botões.

check_circle

O que fazer

Use botões para solicitar uma ação. Ou use um ícone de título para um elemento estático.

cancel

O que não fazer

usar um botão como um elemento decorativo estático.

Anatomia

Personalização

Os botões têm uma variação padrão e grande, além de estados padrão, em foco e pressionado para cada um. Os ícones podem ser usados para dar mais ênfase, esclarecimento e reconhecimento ao botão. O tamanho do botão pode ajudar a enfatizar a importância.