Floating Action Button
A versatile floating action button component with customizable positioning, expandable menus, and smooth animations for primary actions in your application.
Pro Features
Unlock advanced capabilities with the Pro version
Smart Positioning
Flexible positioning system with corner and relative options
Expandable Menus
Create multi-action FABs with smooth expand/collapse animations
Smooth Animations
Framer Motion powered hover, tap, and transition effects
Touch Optimized
Mobile-friendly interactions with proper touch targets
Variant System
Multiple size and color variants for different use cases
Responsive Design
Adapts to different screen sizes and orientations
Installation
Install via CLI
moonui add floating-action-buttonUsage
Content Area
The FAB floats above your content and provides quick access to primary actions.
Examples
Basic Floating Action Button
Simple FAB positioned at bottom-right with primary action
Content Area
The FAB floats above your content and provides quick access to primary actions.
Expandable FAB Menu
FAB that expands to reveal multiple action options
Expandable FAB Menu
Click the FAB to reveal multiple action options with smooth animations.
Size and Color Variants
Different sizes and color variants for various use cases
Size Variants
Small
Medium
Large
Color Variants
Default
Secondary
Destructive
Outline
Multiple FAB Positions
FABs positioned at different corners of the container
Four Corner Positions
FABs can be positioned at any corner
FAB with Content Actions
Interactive FAB that adds content to the page
Click the + button to add content