Botões

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

Princípios

Orientado à 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.

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

Flexível: o componente do 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 posicionado 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

Não sobrecarregue 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 chip de título para um elemento estático.

cancel

O que não fazer

Não use um botão como um elemento decorativo estático.

Anatomia

Personalização

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