Logo

Floating Action Button (FAB)

O FAB mantém uma ação global sempre disponível, flutuando sobre o conteúdo para acelerar tarefas recorrentes.

Quando usar

  • Destacar a ação mais frequente da tela em cenários mobile ou responsivos.
  • Oferecer atalhos globais, como criar registros ou abrir filtros relevantes.
  • Complementar dashboards e listas quando o CTA principal não cabe no cabeçalho.
  • Ativar drawers ou modais rápidos sem perder o contexto atual.

Exemplo básico

FAB com ação principal única

Proto-Typed
Loading DSL editor...

Por quê: mantém a criação de tarefas ao alcance sem competir com o conteúdo da tela.

FAB acionando modal de confirmação

Proto-Typed
Loading DSL editor...

Quando usar: reforçar ações globais que precisam de confirmação antes de executar. Por quê: evita execuções irreversíveis ao intercalar feedback imediato.

FAB abrindo drawer contextual

Proto-Typed
Loading DSL editor...

Quando usar: expor ajustes rápidos mantendo os dados principais visíveis. Por quê: o drawer permite ajustes inline sem mudar de tela.

Composição (usando com outros)

  • FAB + Button principal — CTA fixo convive com ações locais em cards.
  • FAB + Drawer — abre filtros ou detalhes sem redirecionar.
  • FAB + Modal — valida comandos críticos antes de prosseguir.

Slots & Props

NomeTipoPadrãoDescriçãoObrigatório
itenslista `- i-IconDestino`—Cada linha define ação com ícone e destino alvo.
íconetoken i-—Ícone exibido no botão flutuante.Sim
destinoslug/ação—Tela, modal ou drawer aberto ao tocar.Sim
ordemprioridade—Primeira linha é a ação principal; demais seguem ordem decrescente.Não

Erros comuns (Do/Don’t)

❌ Errado — CTA duplicado

Loading DSL editor...

✅ Correto — CTA complementar

Loading DSL editor...

Por quê: o FAB deve adicionar valor extra, não duplicar o CTA já disponível.

❌ Errado — FAB com ações desconexas

Loading DSL editor...

✅ Correto — Foco em filtros e criação

Loading DSL editor...

Por quê: ações relacionadas reduzem dúvida sobre o objetivo do FAB.

Referências cruzadas

Relacionados

  • Button: ações locais dentro do conteúdo.
  • Drawer: painéis laterais acionados pelo FAB.
  • Modal: confirmações ou formulários rápidos.
  • Dashboard: guia com uso frequente de FAB em telas analíticas.

Composições recomendadas

  • FAB + Drawer → filtros e detalhes avançados sem sair da tela.
  • FAB + Modal → confirmação rápida de ações globais.
  • FAB + List → mantém criação acessível enquanto percorre itens.

FAB abrindo filtros no dashboard

Proto-Typed
Loading DSL editor...

Por quê: facilita ajustes enquanto mantém os indicadores à vista.