Floating Action Button (FAB)

Botão circular que flutua sobre o conteúdo e destaca a ação principal da tela.

Hard

O que é

FAB é um botão circular que paira sobre o conteúdo e dá acesso rápido à ação mais importante de uma tela. Ele nasceu no Material Design do Google e acabou virando padrão tanto em mobile quanto em web, e é visualmente distinto, por posição, cor e forma, justamente pra a pessoa reconhecer na hora pra que ele serve.

Na interface, o FAB simplifica ao puxar a atenção pra uma única ação principal por tela, o que deixa o próximo passo óbvio. O FAB do Gmail no celular abre um novo e-mail, e o do Google Maps puxa as direções. A acessibilidade pesa bastante aqui, porque ele precisa estar na zona de alcance do polegar, ter contraste suficiente e vir com rótulo ou tooltip pra ficar claro, inclusive pro leitor de tela.

Em uma frase

Vamos usar um FAB no canto pra criar tarefa, mas só um, porque mais de um tira o sentido de ação principal.

A pergunta que ele responde

Como deixo a ação principal da tela sempre à mão sem poluir o resto?

Quando usar

Ajuda a dar acesso constante e visível à ação mais importante e mais frequente de uma tela.

Como não usar

O cuidado é botar vários FABs na mesma tela. Quando tudo vira principal, nada é principal de verdade, e a tela acaba mais confusa do que era antes.

Na prática

Pense num app de tarefas em que o FAB no canto cria uma tarefa nova com um toque, sempre no mesmo lugar e sempre à mão. É essa constância que faz a ação principal ficar fácil de achar.

Não confunda com

Vale separar o FAB de um botão comum. O FAB flutua e marca a única ação primária da tela, enquanto o botão comum vive dentro do fluxo e pode aparecer várias vezes. Um é o destaque único, o outro é parte do tecido da interface.

Design

Em inglês

Floating Action Button (FAB)

Pronúncia

fléu-ting ék-xân bâ-ton

Também chamado de

FAB, botão de ação flutuante

Origem

Material Design (Google).

Fonte

Saiba mais

Material Design, documentação sobre Floating Action Button