FAB
Botão de ação flutuante — o que a ação primária da tela vira no mobile, fixo acima da NavBar.
Uso em tela
Um botão circular fixo no canto inferior direito, acima da NavBar, com a cor primária e um ícone (em geral +). Aparece só no mobile: no desktop/tablet a ação primária vive no Subheader. Use um único FAB por tela — ele carrega a ação mais esperada do contexto (criar/adicionar). Ações secundárias não viram FAB: ficam no Subheader (rolando) ou em "Mais ações".
Quando a ação primária abre tipos (split "Novo X"), o FAB abre um modal-sheet com as opções — não um menu solto.
Responsividade
Segue a régua geral em Foundations › Breakpoints:
| Largura | Comportamento |
|---|---|
| Desktop / Tablet · ≥ 640px | Sem FAB — a ação primária fica no Subheader. |
| Mobile · < 640px | A ação primária vira FAB (inferior direito, fixo acima da NavBar). |
Acessibilidade
- O FAB precisa de rótulo acessível (
aria-label) — é um botão só com ícone. - Alvo de toque confortável (≥ 44px) e contraste suficiente sobre o conteúdo.
- Não deve cobrir conteúdo essencial nem a NavBar; fica acima dela, com folga.
No código
Não é um componente próprio: é um botão posicionado (UButton rounded-full, cor primária, position: fixed/absolute no canto inferior direito) — ver Button.