Contexto
O botão flutuante destaca uma ação sobre o conteúdo e pode mantê-la acessível durante a rolagem. Porém, sua posição fixa pode cobrir informações, campos, controles, navegação ou mensagens temporárias.
A decisão depende da prioridade da ação, da frequência de uso, do dispositivo, da densidade da tela, da clareza do ícone e da possibilidade de manter o controle acessível sem sobreposição.
Use o botão flutuante somente quando houver uma ação principal, construtiva e recorrente, como criar, adicionar, compartilhar ou iniciar uma tarefa. Confirme que ele representa a ação mais importante ou mais comum da tela.
Mantenha uma única ação principal por tela ou contexto. Se houver várias ações equivalentes, use uma barra de ações, toolbar ou outro agrupamento mais explícito.
Comunique a finalidade usando um ícone reconhecível e um rótulo visível quando o significado não for imediato.
Evite sobreposição posicionando o botão com respeito às áreas seguras, à navegação inferior, aos teclados virtuais, aos diálogos, aos bottom sheets, aos banners e às mensagens temporárias. Garanta que ele não cubra informações nem impeça a interação com elementos importantes.
Escolha o padrão adequado ao contexto. Em telas densas ou em fluxos de formulário, uma ação inline ou uma barra persistente pode ser melhor. No desktop, não use o botão apenas para economizar espaço: verifique se a ação realmente precisa permanecer disponível durante a navegação.
Teste estados e formas de entrada, incluindo foco, pressionamento, desabilitação, teclado, toque, zoom, leitor de tela e conteúdo real.
Em interfaces móveis, a posição inferior direita é comum em contextos de leitura da esquerda para a direita, mas não deve ser tratada como regra universal. A posição precisa respeitar a plataforma, a direção do conteúdo e as áreas seguras do dispositivo.
Porque isso importa?
A posição flutuante aumenta a visibilidade, mas também cria uma camada sobre o conteúdo. Se for usada sem critério, pode esconder informações, competir com a hierarquia da tela ou levar a pessoa a interpretar uma ação secundária como principal.
O Material recomenda o FAB para a ação primária ou mais comum da tela e desaconselha seu uso para ações menores, destrutivas ou pouco claras. A documentação também recomenda limitar a quantidade de FABs por tela.
Em interfaces móveis, elementos fixos precisam ser avaliados com cuidado porque podem cobrir conteúdo e controles durante a rolagem. A decisão deve combinar prioridade da ação, comportamento da interface, acessibilidade e testes no dispositivo real.
Quando usar?
- Existe uma ação principal e recorrente na tela.
- A ação é construtiva, como criar, adicionar ou compartilhar.
- A ação continua relevante durante a rolagem.
- O ícone ou rótulo comunica claramente sua finalidade.
- Há espaço suficiente para não cobrir conteúdo ou controles.
- A posição pode ser adaptada ao dispositivo e à área segura.
- O comportamento foi testado com conteúdo real.
Quando evitar?
- Há várias ações com a mesma prioridade.
- A ação só faz sentido junto de um campo, card ou seção específica.
- A ação é destrutiva, rara ou difícil de compreender.
- O significado depende apenas de um ícone ambíguo.
- O botão cobre conteúdo, campos, navegação ou mensagens.
- Uma toolbar, barra inferior ou botão inline expressa melhor a relação com o conteúdo.
- O botão só funciona bem com mouse, hover ou coordenadas fixas.
Recomendações
Faça
- Priorize uma ação.
- Use rótulo quando necessário.
- Reserve espaço ao redor.
- Respeite a área segura.
- Mantenha o foco visível.
- Teste com conteúdo real.
Evite
- Não use por moda.
- Não empilhe FABs.
- Não cubra conteúdo.
- Não esconda o nome da ação.
- Não dependa só de cor ou sombra.
- Não use para ações destrutivas.
