---
# System prepended metadata

title: Botões
tags: [misc]

---

# Botões
###### tags: `misc`


## Botões fixos
Use quando sua interface inteira apresenta apenas uma tarefa ao usuário. São normalmente ações do tipo "Continuar", "Salvar", "Concluir", ou "Entendi".

* Telas preenchimento de um formulário
* Telas de seleção de um item em um lista
* Telas de conclução uma compra
* Wizards e onboardings

### Exemplos
* Escolha de forma de pagamento
* Seleção de operadora de telefone
* Acesse sua conta
* Formulário de transferência
* Formulário de e-mail
* Cadastro de endereço
* Escolha de senha
* Digitação de e-mail

### Dicas
Lembre-se que sua interface pode conter múltiplos componentes e ainda apresentar apenas uma tarefa ao usuário. Uma tela transferência, por exemplo, pode conter um dropdown para selecionar a finalidade da transação, tags para marcar o tipo de conta, um switch para indicar se a conta de destino é a do titular, além dos próprios inputs de texto.

Mas como se trata de apenas uma tarefa, a de transferir dinheiro para outra conta, ela usa um botão fixo.

Mantemos ações desse tipo fixos da base tela para que fiquem mais fáceis de alcançar, ao mesmo tempo que criamos consistência e previsibilidade na interação do usuário com diferentes partes do produto.

---

## Botões regulares (rounded)
Use botões regulares quando sua interface apresenta duas ou mais tarefas de naturezas diferentes.

### Exemplos
* Tela de login do app
* Dashboards
* Telas de confirmação com múltiplas opções

### Dicas
Observe a tela de login do app BB, por exemplo. Ela oferece múltiplas tarefas diferentes ao usuário: entrar na conta, escolher outra conta, ver mensagens, abrir a camera, abrir o Pagar e Receber e outras. São ações de natureza totalmente diferente.

Note que, apesar de estarmos falando de uma tela de login, o botão "Entrar" não fica fixo na base da tela. Ele fica junto na região central da tela, junto a sua foto e ao número da conta, que são o conteúdo da tarefa de acessar na conta. As demais ações ficam distribuídas no cabeçalho ou rodapé.

Nessa situação, um botão "Entrar" fixo na base da UI seria problemático, já que deixaria de ficar associado ao conteúdo da tarefa "entrar na conta".


---


## Posso usar botões fixos e regulares ao mesmo tempo?
Em situações pouco comuns em que uma UI apresenta múltiplas tarefas de natureza diferentes, mas que tem de uma ação primária comum, é possível combinar os dois tipos de botões.

Olhe o exemplo de interface de conclusão de uma compra de um Gift Card. Ela oferece opções de copiar o código de resgate, enviar como presente, ver os termos de uso, ver instruções de resgate e uma ação de sair e voltar para a tela inicial.

Ver o código, copiar e compartilhar são as principais ações, por isso ficam na região superior da tela, próximos ao código de resgate.

A ação de concluir também é importante, mas não tem relação direta com nenhuma das outras tarefas. Ela é uma ação global da tela, e por isso deve ser um botão fixo.