Botões

Os botões permitem que os usuários executem uma ação ou naveguem para outra página.

Eles têm vários estilos para várias necessidades e são ideais para chamar a atenção para onde um usuário precisa fazer algo para seguir em frente em um fluxo.

Opções

# Etiqueta, ícone e sem a etiqueta

Os botões sempre devem ter uma etiqueta para acessibilidade;
Eles também podem ter um ícone opcional;
Um ícone só deve ser usado em um botão quando for absolutamente necessário e quando tiver uma forte associação com o texto da etiqueta;
Os ícones não devem ser usados apenas como decoração;
A etiqueta pode ser ocultada para criar um botão apenas de ícone. Se a etiqueta estiver ocultada, um ícone será necessário e a etiqueta aparecerá em uma dica de ferramenta ao passar o mouse;
Os botões apenas com ícones são melhores para ações comuns e facilmente reconhecíveis.

# Variante acentuada

O botão de acentuação comunica uma forte ênfase e é reservado para ações que são essenciais para uma experiência;
Não use mais de 3 botões de acentuação na mesma visualização;
Eles dão destaque extra a ações importantes e têm como objetivo estabelecer uma hierarquia clara;

# Variante primária

O botão principal é para ênfase média;
Use-o no lugar de um botão de apelo à ação quando a ação exigir menos destaque ou se houver várias ações principais da mesma importância na mesma vista.

# Variante secundária

O botão secundário é para pouca ênfase;
Ele é emparelhado com outros tipos de botão para trazer à tona ações menos proeminentes e nunca deve ser o único botão em um grupo.

# Variante negativa

O botão negativo é para enfatizar ações que podem ser destrutivas ou ter consequências negativas se realizadas.
Use-o com moderação.

# Cor estática

Quando um botão precisar ser colocado sobre um plano de fundo colorido ou visual, use a opção de cor estática;
Os botões de cores estáticas estão disponíveis em estilos de contorno ou preenchimento, em preto ou branco, e não alteram tons ou valores dependendo do tema de cores;
Use preto estático em cores claras ou planos de fundo de imagem e branco estático em cores escuras ou planos de fundo de imagem, independentemente do tema de cor;
Os botões de cores estáticas podem aparecer em branco ou preto estático, independentemente do tema da cor;
A opção de cor estática permite que eles sejam colocados em cima de um fundo personalizado que não faz parte de um tema de cores do Spectrum, ao mesmo tempo que fornece contraste ideal.

# Silencioso

Por padrão, os botões têm um plano de fundo ou contorno visível;
Alternativamente, os botões silenciosos não tem plano de fundo ou contorno visível. Esse estilo deve ser usado quando um layout precisar de vários botões;
Esse estilo não deve ser aplicado para ações positivas;
Muitos componentes silenciosos em um espaço pequeno podem ser difíceis de ler;

# Estilo

Os botões estão disponíveis em estilos de preenchimento ou contorno;
Um botão no estilo de preenchimento tem um fundo sólido, uma vez que deve ser intencionalmente mais destacado do que um botão no estilo de contorno;
Um botão de estilo de contorno tem um traço visível e nenhuma cor de fundo e deve ser usado apenas para ações secundárias;

# Tamanho

Os botões vêm em quatro tamanhos diferentes: pequeno, médio, grande e extragrande;
O tamanho médio é o padrão e a opção mais usada;
Use os outros tamanhos com moderação; eles devem ser usados para criar uma hierarquia de importância dentro da página;
Os botões de cores estáticas podem aparecer em branco ou preto estático, independentemente do tema da cor;
A opção de cor estática permite que eles sejam colocados em cima de um fundo personalizado que não faz parte de um tema de cores do Spectrum, ao mesmo tempo que fornece contraste ideal.

# Justificado

Um botão pode ser justificado;
Por padrão, não é justificado, pois o tamanho do botão depende do rótulo e/ou ícone dentro de cada botão;
Quando um botão é justificado, ele ocupa toda a largura disponível do container.

# Desativado

Um botão em um estado desabilitado mostra que uma ação existe, mas não está disponível naquela circunstância;
Este estado pode ser usado para manter a continuidade do layout e para comunicar que uma ação pode ser disponibilizada posteriormente.

Comportamento

# Foco do teclado

Um botão pode ser navegado usando um teclado;
O estado de foco do teclado assume o estado de foco visual do botão e adiciona um anel verde ao botão em foco.

# Dica de ferramenta quando o rótulo está oculto

Quando o rótulo do botão está oculto, uma dica de ferramenta é mostrada ao passar o mouse que exibe o texto do rótulo e, se apropriado, um atalho de teclado.

# Largura flexível

A largura de um botão se ajusta automaticamente para caber no texto da etiqueta;
O preenchimento de cada lado do botão é igual à metade de sua altura.

# Largura mínima

Os botões têm uma largura mínima de 74px;
Isso garante que os botões pequenos mantenham uma forma identificável;
Quando o botão for composto apenas com ícone (sem texto) a largura mínima vai ser igual a altura.

Diretrizes de uso

# Use ícones apenas quando necessário

Os ícones podem ser usados em botões quando clareza adicional é necessária e o ícone é altamente relevante para a ação;
Os ícones não devem ser usados para decoração.

# Não substitua a cor

Não use cores personalizadas para os botões;
As cores das diferentes variações dos botões foram projetadas para serem consistentes e acessíveis.

Padrões de conteúdo

# Seja conciso

O texto do botão deve ser conciso: 1 ou 2 palavras, no máximo 4 palavras, com menos de 20 caracteres incluindo espaços;
Não use sinais de pontuação, como pontos finais ou pontos de exclamação.

# Escreva rótulos como verbos

Um botão representa uma ação, portanto, seu rótulo precisa refletir a ação que um usuário está realizando - que é um verbo;
Rótulos escritos como substantivos ou adjetivos tendem a ser confusos e desorientadores.

# Declare claramente a ação

Certifique-se de que a etiqueta de um botão indique claramente o resultado da ação;
Use a mesma palavra ou frase encontrada em outras partes da experiência;
Por exemplo, ao criar um formulário para as pessoas se inscreverem, use “Inscreva-se” como a chamada à ação para preencher o formulário;
Palavras como “Enviar” ou “Entrar”, embora tecnicamente corretas, focam na ação de concluir o preenchimento do formulário em si, ao invés do que o usuário está realmente fazendo ao preenchê-lo (inscrevendo-se em algo).

# Use maiúsculas sempre

O texto do botão deve estar sempre em caixa alta;
Nunca use letras minúsculas ou embaralhadas em algum botão específico.

# Esteja ciente do tom

Emoji e pontos de exclamação não são apropriados para a natureza funcional e utilitária dos botões;
Mantenha o rótulo apenas em texto, sem pontuação ou decoração extra.