Botões

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

Princípios

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

Botões de ícone

Botões de ícone estão disponíveis para reduzir a densidade do conteúdo. Use botões de ícone quando o ícone ilustrar claramente uma ação. Caso contrário, inclua um rótulo de botão.

Toggable

Para ações com estados booleanos, como "favoritar", uma variante de alternância está disponível para cada tipo de botão. A troca de ícones entre estados de ativação torna a interação rápida e responsiva.

Anatomia

Os botões são compostos por um rótulo e um ícone opcional à esquerda ou à direita.

Os botões de ícone são compostos apenas de um ícone reconhecível.

Ambos têm uma variante alternável.

Personalização

Os botões têm um estilo padrão e grande. O tamanho grande pode ajudar a enfatizar a importância.

Os ícones podem ser usados para dar mais ênfase, esclarecimento e reconhecimento ao botão em uma posição inicial ou final.