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.