Pular para o conteúdo principal

Button

O botão é um elemento da interface que possibilita executar uma ação. Ele deve representar de forma clara e objetiva o efeito da ação ao ser clicado. Não use botões para navegar entre páginas, para isso, use links.

Tipos​

Botão primário​

Use para indicar a principal ação disponível na página. Em uma interface deve existir apenas um botão primário.

Botão secundário​

Use para indicar ações gerais. Seu nível de importância é médio, então, para evitar problemas de hierarquia, use as ações secundárias sempre relacionadas a alguma ação primária.

Botão terciário​

Use para indicar ações gerais de pouca importância na hierarquia da interface e que não sejam primárias ou secundárias. Por exemplo: voltar, fechar overlays, entre outros.

Botão para ações destrutivas​

Use quando a ação principal levar à perda de informações. Ele deve vir sempre acompanhado do botão Cancelar, permitindo que a pessoa usuária desista da ação.

Somente ícone​

Utilize ícones de fácil reconhecimento. Ícones genéricos podem gerar confusão. Para mais detalhes acesse nossa aba de exemplos.

ToggleButton​

O agrupamento compacto pode ser usado quando o botão não for de uma ação, mas sim de uma opção que pode ser selecionada. Para mais detalhes acesse nossa aba de exemplos.

Botão de IA​

Utilize os botões de IA para identificar ações diretamente relacionadas a recursos de Inteligência Artificial. Eles estão disponíveis apenas para os tipos primário e secundário.

Reserve este estilo apenas para ações de IA. Não o utilize para ações gerais nem como substituto dos outros tipos existentes.

Tamanhos​

Pequeno​

Deve ser utilizado apenas em caso de exceção, quando não for possível utilizar o tamanho padrão.

Médio (padrão)​

Principal tamanho de botão. Deve ser utilizado na maioria dos casos.

Agrupamento de botões​​

Agrupamento de acordo com a similaridade e contexto de seus efeitos.

Boas práticas​

Apenas um botão primário por tela​

Botões diferentes lado a lado​​

Label e responsividade​

Botões sempre se ajustam ao tamanho do label. Não modifique seu tamanho.

É através de um botão que a pessoa usuária conversa com a experiência, portanto evite surpresas para ela.

Informe exatamente o que vai acontecer quando o botão for clicado. Botões de ação devem ter duas palavras para dar mais clareza.

Dica
  • Recomenda-se o uso de labels com 2 ou 3 palavras no máximo.
  • Botões nunca devem quebrar em 2 linhas e nem cortar palavras pela metade.
  • O label deve refletir exatamente a ação que o botão fará. Siga nossas recomendações de texto.

Para ação única: use o verbo no infinitivo + alvo ou item da ação. Exemplo: Salvar Email.

Para ação dupla: use 2 verbos no infinitivo. Exemplo: Salvar e sair / Salvar e avançar.

Para interações relacionadas a desfazer: use apenas o verbo no infinitivo. Exemplo: Cancelar / Excluir.

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.