Carregando…Carregando…Carregando…Carregando…Floating Action Button with optional speed-dial sub-actions, fixed corner or inline positioning.
$ npx kikitocn add fabimport { FAB } from "@/components/ui/cn/fab/FAB";
export function FABExample() {
return (
<FAB position="bottom-right" placement="top" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
icon* | React.ReactNode | — | Ícone principal |
actions | FabAction[] | — | Sub-ações do speed-dial { icon, label, onClick, disabled?, intent? } |
position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'inline' | 'bottom-right' | Posição fixa num canto da tela, ou 'inline' pra renderizar no fluxo normal do documento |
placement | 'top' | 'bottom' | 'left' | 'right' | — | Direção de expansão das ações. Se omitido, é inferida de `position` (fixed); útil sobretudo com position='inline' |
intent | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral' | 'primary' | Cor do botão |
size | 'sm' | 'md' | 'lg' | 'md' | Tamanho do botão |
tooltip | string | — | Nome acessível do botão principal (aria-label + tooltip nativo). Recomendado sempre informar. |
onClick | () => void | — | Callback ao clicar (sem sub-ações) |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |
Speed-dial (bottom-right)
Intent colors
Sizes
placement — 4 direções, cor por ação
Quick Actions — expandable FAB with animated action buttons