Floating Action Button

A primary action button that hovers over content, typically representing the primary action of a screen.

Variants

FABs come in various semantic variants like default (primary), secondary, destructive, and outline.

Sizes

Available in default, small, large, and icon-only sizes.

Usage Guidelines

Place FABs fixed to the bottom right of the viewport by default (or above mobile bottom navigation).
Only use one prominent FAB per screen to indicate the most important action.
Combine with pointer-events-none on a wrapper and pointer-events-auto on the Fab to ensure clicks pass through the wrapper.
Icon-only FABs should always have an aria-label for accessibility.