Um botão de ação flutuante (FAB) é um botão de alta ênfase que permite ao usuário realizar uma ação principal em um aplicativo. Promove uma ação única e focada esse é o caminho mais comum que um usuário pode seguir e geralmente é encontrado fixado no canto inferior direito da tela.
Considere estes três casos de uso em que você pode usar um FAB:
- Criar novo item: em um app de anotações, um FAB pode ser usado para rapidamente criar uma nota.
- Adicionar novo contato: em um app de chat, um FAB pode abrir uma interface que permite o usuário adiciona alguém a uma conversa.
- Localização central: em uma interface de mapa, um FAB pode centralizar o mapa no local atual do usuário.
No Material Design, há quatro tipos de FAB:
- Botão de ação flutuante: um botão de ação flutuante de tamanho normal.
- FAB pequeno: um botão de ação flutuante menor.
- FAB grande: um botão de ação flutuante maior.
- FAB estendido: um botão de ação flutuante que contém mais do que apenas um ícone.
Plataforma da API
Embora existam vários elementos combináveis que podem ser usados para criar uma ação flutuante consistentes com o Material Design, os parâmetros não são muito diferentes. Estes são os principais parâmetros que você precisa considerar:
onClick
: a função chamada quando o usuário pressiona o botão.containerColor
: a cor do botão.contentColor
: a cor do ícone.
Botão de ação flutuante
Para criar um botão de ação flutuante geral, use o método
Elemento combinável FloatingActionButton
. O exemplo a seguir demonstra uma
implementação básica de um FAB:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Essa implementação aparece da seguinte maneira:

Botão pequeno
Para criar um pequeno botão de ação flutuante, use o
Elemento combinável SmallFloatingActionButton
. O exemplo a seguir demonstra
como fazer isso, com a adição de cores personalizadas.
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
Essa implementação aparece da seguinte maneira:

Botão grande
Para criar um botão de ação flutuante grande, use o método
Elemento combinável LargeFloatingActionButton
. Esse elemento combinável não é
significativamente diferente dos outros exemplos, exceto pelo fato de resultar
em um botão maior.
Confira a seguir uma implementação simples de um grande botão de ação flutuante.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
Essa implementação aparece da seguinte maneira:

Botão estendido
É possível criar botões de ação flutuantes mais complexos com o
Elemento combinável ExtendedFloatingActionButton
. A principal diferença entre eles
e FloatingActionButton
é que ele tem icon
e text
dedicados
parâmetros. Elas permitem que você crie um botão com conteúdo mais complexo que é dimensionado
para se ajustar adequadamente.
O snippet a seguir demonstra como implementar
ExtendedFloatingActionButton
, com valores de exemplo transmitidos para icon
e
text
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
Essa implementação aparece da seguinte maneira:

Outros recursos
- Botões comuns
- Documentação sobre a interface do Material Design (link em inglês)