Floating Action Button
A floating action button anchored to a viewport corner. Supply an `actions` list to turn it into an expandable, spring-animated menu for secondary actions.
Pro Features
Unlock advanced capabilities with the Pro version
Corner Positioning
Anchor the button to any of four viewport corners with the `position` prop.
Expandable Menu
Provide `actions` to reveal a spring-animated menu of secondary buttons with labels.
Framer Motion
Hover scale, tap feedback and a 45° open rotation powered by Framer Motion.
Backdrop Dismiss
An overlay closes the menu when you click outside it.
Installation
Install via CLI
npx @moontra/moonui-cli add floating-action-buttonUsage
Content area
The button floats in the corner and triggers a primary action.
Created items: 0
Examples
Basic Floating Action Button
A single FAB anchored to the bottom-right corner. With no actions, clicking it fires onClick.
Content area
The button floats in the corner and triggers a primary action.
Created items: 0
Expandable Action Menu
Pass an `actions` array to turn the FAB into an expandable menu. The main button toggles the menu (spring animation + backdrop) and each action closes it when selected.
Expandable menu
Provide actions and the main button toggles a menu instead of firing onClick.
Last action: —
Size Variants
Three sizes: sm (h-10 w-10), default (h-12 w-12) and lg (h-14 w-14).
Corner Positions
The `position` prop anchors the button to any of the four viewport corners.
Four corners
top-left · top-right · bottom-left · bottom-right
Contextual Quick Actions
Wire each action's onClick to real logic — here they append content items to a list.