Floating Action Button
Trigger that fans out into secondary actions with a gooey merge effect.
Installation
pnpm dlx shadcn@latest add https://yea-ui.vercel.app/r/floating-action-button.json
Usage
import { FloatingActionButton, FloatingActionButtonTrigger, FloatingActionButtonItem } from "@/components/ui/floating-action-button"<FloatingActionButton>
<FloatingActionButtonTrigger aria-label="Create">
<PlusIcon />
</FloatingActionButtonTrigger>
<FloatingActionButtonItem aria-label="Edit">
<PencilIcon />
</FloatingActionButtonItem>
</FloatingActionButton>Examples
Sides
Set side to fan items out top, bottom, left or right.
top
right
bottom
left
API reference
FloatingActionButton
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
onOpenChange | (open: boolean) => void | — | Called when the open state changes. |
closeOnSelect | boolean | true | Close after an item is clicked. |
side | "top" | "bottom" | "left" | "right" | "top" | Direction items fan out from the trigger. |
gap | number | 12 | Spacing in pixels between stacked items. |
FloatingActionButtonTrigger / FloatingActionButtonItem
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "outline" | "ghost" | "negative" | "glass" | "link" | "glass" | Visual style. glass renders regular-thickness glass instead of Button's own thin glass variant. |
size | "icon" | "icon-md" | "icon-md" for the trigger, "icon" for items | Diameter of the button. |