FloatingActionButton
Fixed-position FAB for primary screen actions with animation, positioning options, and extended label support
FloatingActionButton
A floating action button (FAB) for prominent, contextual actions. Supports positions, sizes, variants, labels and custom offsets.
Basic usage
Use FloatingActionButton with variant, position, icon and an optional label. The button is fixed to the viewport by default.
Scroll or resize the page – the FAB stays pinned to the viewport.
Positions & variants
Control where the FAB is anchored using position and style it with variant. Useful for primary and secondary actions across the app.
Sizes & offsets
Use size for density and offset to tweak the distance from the viewport edge. This helps when avoiding overlapping with other fixed elements.
Different sizes with progressively larger offsets.
Advanced patterns
Use multiple FABs together or render as another element with asChild for custom layouts.
Stacked FABs for quick reactions and an asChild example that wraps a custom button.
Usage Guidelines
When to Use
- Primary screen action
- Create new item
- Quick actions
Accessibility
- Accessible fixed position
- aria-label required
Performance
- CSS position fixed
- Minimal JavaScript
Common Mistakes
- Multiple FABs competing
- No tooltip for FAB action
Frequently Asked Questions
Related Components
View allPrimary action component with variant system, size options, loading states, icon slots, and optional shimmer effects
Grouped button layout with shared borders, orientation control, and seamless visual connection between actions
Icon-only button with size variants, accessibility labels, and interaction states
Specialized media control button with play/pause state visualization and audio-visual feedback