Common Button
Common Button permitem que as pessoas tomem ação e façam escolhas com um toque
Uso
Common Button comunica ações que os usuários podem tomar. Eles geralmente são colocados em toda a sua interface do usuário.
Common Button é apenas uma opção para representar ações em um produto e não devem ser usados em excesso. Muitos Buttons em uma tela perturbam a hierarquia visual.
✅ Do
Use as skins de acordo com a hierarquia necessária para cada ação.
❌ Don't
Não sobrecarregue sua interface com muitos Common Buttons com a mesma Skin. Considere apresentar ações de menor prioridade como Skins mais leves e apenas iconografia.
✅ Do
A largura do contêiner de botão é definida dinamicamente para se ajustar ao texto do rótulo.
❌ Don't
A largura do contêiner de botão não deve ser mais estreita do que o texto do rótulo.
✅ Do
A largura do contêiner do Common Button pode ser definida de acordo com a grade de layout responsivo.
Anatomia
❖. Container
Em Skins com container visível, ele receberá um cor pelo appearance selecionado.
Os contêineres de Buttons contêm dentro o label e o icon (opcional).
Os Clean Buttons têm um contêiner visível apenas quando estão sendo passados o mouse, focados ou pressionados.
✅ Do
A largura de um Common Button pode ser definida dinamicamente para conter o label.
❌ Don't
A largura de um Common Button não deve ser menor que o label.
Apenas ícone
Em únicos casos de Buttons que contenham apenas ícone, é permitido utilizar a versão do container circular. Ative pelas variables disponíveis.
1. Label
O Label é o elemento mais importante de um Common Button. Ele indica a ação que ocorrerá se um usuário tocar no componente.
Coloque em maiúscula a primeira letra da primeira palavra e dos nomes próprios no texto do rótulo do botão. Isso permite distinguir os nomes próprios, por exemplo: Book with Flights vs BOOK WITH FLIGHTS.
✅ Do
Use maiúscula apenas na primeira palavra e em nomes próprios para o label do botão.
❌ Don't
Não quebre o texto. Para máxima legibilidade, o label deve permanecer em uma única linha.
O Clean Common Button dependem da cor e do estilo do texto do rótulo para serem reconhecíveis dos demais textos e elementos.
Atenção
Nos Clean Common Button, o label deve usar uma cor, estilo ou layout diferentes dos demais textos. No exemplo acima, as ações seriam mais proeminente em um Fill Common Button em vez de um Clean Common Button.
Status de sistema
O label de acessibilidade para um Button idealmente vem do label visível no Button, como Concluído, Enviar ou Responder. Considere alinhar o label de acessibilidade (usado para dispositivos de tecnologia assistiva, como leitores de tela) com o label visível.
Se o Button não tiver label visível, o que é o caso do Button com somente ícone, faça com que a Tooltip interna (ative-a) e o label de acessibilidade descrevam a ação que o Button está executando, como Favorito, Marcador ou Enviar mensagem.
2. Icons (optional)
Icons comunicam visualmente a ação do Common Button e ajudam a chamar a atenção. Eles devem ser colocados no lado inicial do botão, antes do label, ou depois.
✅ Do
Use ícones que claramente comuniquem seu significado.
❌ Don't
Não alinhe verticalmente um ícone e texto no centro de um botão.
⚠️ Warning
Atenção ao utilizar dois icons. Seja criterioso e avalie se o contexto permite.
Variantes
Candy
Os Candy Common Button têm o maior impacto visual e devem ser usados para ações com intuito de marketing.
Fill
Os Fill Common Button têm o maior impacto visual após o Candy e devem ser usados para ações importantes e finais que completam um fluxo, como Ouvir, Enviar ou Pagar.
Fill Common Button exibem um contêiner ao redor de um rótulo de texto e devem ter contêineres com uma cor sólida de escala 600.
Tonal
Um Tonal Common Button é um meio-termo alternativo entre Fill e Outlined. Eles são úteis em contextos onde um botão de menor prioridade requer um pouco mais de destaque do que um contorno daria.
Outlined
Os Outlined Common Button são de média ênfase. Eles contêm ações que são importantes, mas não são a ação principal.
Os Outlined Common Button combinam bem com os Fill Common Button para indicar uma ação alternativa ou secundária.
Clean
Os Clean Common Button são usados para as ações de menor prioridade, especialmente ao apresentar várias opções.
Os Clean Common Button podem ser colocados em uma variedade de fundos. Até que o botão seja interagido, seu contêiner não é visível.
Como os Clean Common Button não têm um contêiner visível em seu estado padrão, eles não distraem do conteúdo próximo.
A cor e o estilo do texto do rótulo devem sempre ser reconhecíveis em relação ao texto e elementos que não são de Button.
Use cases
Referências
Histórico de Atualizações
Atualizado