Gooey FAB
A floating action button that gooey-morphs to extrude its satellite actions like liquid metaballs.
The Gooey FAB extrudes a set of satellite actions from a single trigger, fused by an SVG metaball filter so they split apart like mercury. The trigger icon rotates from a plus into a cross as it opens.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/gooey-fab.json"Usage
tsx
import { GooeyFab } from "@/components/godui/gooey-fab";tsx
<GooeyFab
direction="up"
actions={[
{ label: "Edit", icon: <EditIcon />, onClick: edit },
{ label: "Share", icon: <ShareIcon />, onClick: share },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
actions | GooeyFabAction[] | — | Satellite actions (icon, label, onClick) |
size | "sm" | "md" | "lg" | "md" | Trigger and satellite size |
direction | "up" | "down" | "left" | "right" | "up" | Direction the satellites extrude |
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Uncontrolled initial open state |
onOpenChange | (open: boolean) => void | — | Fires when the open state changes |
triggerIcon | ReactNode | plus → cross | Custom trigger icon |
triggerLabel | string | "Open actions" | Accessible trigger label |