O que é um botão FAB?

FAB UI

É um botão flutuante muito utilizado por designers nos seus projetos.

A sigla vem do inglês para Floating Action Button ou seja botão de ação flutuante. É um botão que fica na tela sempre na mesma posição independente da rolagem da página. Apesar de ficar em um canto em tamanho pequeno ele tem uma grande interferência na interface da aplicação ou site. Esse botão flutuante está previsto nos principios do Material Design. 

Ele tem um link para outra página ou um submenu com vários outros. Também é utilizado para guardar um chat, ou um link para o whatsapp, ou um botão para subir ao topo da página.

Dependendo da solução pode ser circular, quadrado, arredondado ou com outro formato dependendo do leiaute. Ele dispara uma ação definida na interface do usuário de acordo com o toque ou o clique.

É muito usado em sites, apps e aplicações web. Serve normalmente para mostrar uma ação primária ou comum na página, ou seja para dar continuidade no fluxo principal estipulado. Por isso seu conteúdo fica sobre os outros elementos.

Pode ser usado mais de um FAB na tela, mas se tiverem ações equivalentemente importante. Têm três tamanhos mais usados: regulares em tamanho apropriado e já definido de acordo com a tela, mini com um simbolo menor que se expande ao passar o mouse por cima, ou estendidos que ocupa a largura inteira do bloco ou tela.

A cor do botão normalmente faz contraste com o fundo da página, podendo ser apenas para contrastar no leiaute ou de acordo com a ação. Normalmente fica localizado no canto esquerdo inferior da aplicação.

Quer acompanhar as novidade do site?

Leia mais em: aterial.io/components/buttons...

O que é um botão FAB?

Última atualização: 2023-02-15

Quer acompanhar as novidade do site?
Veja também:

Como mudar tema ou inserir foto no relógio smartwatch D20?

colocar foto relógio d20

Como adicionar caractere invisível em mensagem do whatsapp?

caractere invisível whatsapp

Como quebrar linha em link do whatsapp?

quebra de linha whatsapp api

Como fazer botão flutuante no site?

Botão flutuante

Como colocar ícone no site?

Colocar icone no site

Como colocar botão do whatsapp no site?

Botão whatsapp no site

Web Stories