Botões de ação flutuantes: quando usar um FAB e como animá-lo
Quando um botão de ação flutuante ajuda, quando dói, um FAB por tela, FABs estendidos e menus FAB, comportamento de rolagem e movimento.
Ponto principal
Use um botão de ação flutuante para a ação mais importante em uma tela, como escrever ou criar. Mostre apenas um por tela, pule-o em telas sem uma ação primária clara, use um FAB estendido com um rótulo quando o ícone sozinho não estiver claro e mantenha seu movimento proposital quando ele se expande, recolhe na rolagem ou abre um menu.
Para que serve uma FAB
Material Design 3 descreve o FAB como a ação principal da tela e desaconselha a exibição de vários FABs em uma tela. Observa também que os FABs não são necessários em todas as telas, por exemplo, quando as imagens já representam as ações primárias.
Variantes
O material oferece diversas formas:
- FAB padrão: um ícone para uma ação conhecida, como escrever.
- FAB estendido: ícone mais rótulo, mais claro para ações menos óbvias e em telas maiores.
- FAB grande: para ações primárias proeminentes, adequado para janelas mais largas, como tablets e dobráveis desdobrados.
- Menu FAB: o FAB abre um pequeno conjunto de ações relacionadas.
Quando não usar um
Ignore o FAB para ações menores ou destrutivas, em telas onde a ação principal já é óbvia e onde cobriria conteúdos ou controles importantes. Em iOS, FAB não é um padrão nativo; os botões da barra de ferramentas ou da barra de navegação são mais familiares aos usuários do iPhone.
Movimento
Um FAB geralmente passa de estendido para padrão conforme as pessoas rolam, depois se expande novamente e pode se transformar em uma planilha ou menu quando tocado. Essas transições explicam para onde foi a ação e de onde veio seu conteúdo. Mantenha-os curtos, evite saltar em cada pergaminho e respeite o movimento reduzido.
Princípios-chave para lembrar
- Um FAB por tela, para a ação primária
- Nem toda tela precisa de uma
- Use um FAB estendido quando o ícone não for óbvio
- Evite FABs para ações menores ou destrutivas
- Use movimento para mostrar de onde vem o conteúdo da FAB
Perguntas frequentes
Fontes
- FAB guidelines — Material Design 3