VOL. III · CH. 3.26 · COMPONENT
Floating Action Buttons
A persistent shortcut to a product's single most common action.
1 min read · 121 words
3.26.1Definition & Anatomy
A floating action button (FAB) is a persistently visible button, usually fixed in a corner, giving one-tap access to a product's primary action regardless of scroll position.
3.26.2Common Mistakes
- Using a FAB for a secondary action rather than the genuinely single most common one.
- Overlapping content or other fixed UI elements, obscuring content beneath it.
3.26.3Best Practices
- Reserve a FAB for exactly one primary, high-frequency action — never more than one FAB per screen.
- Ensure adequate spacing so it never blocks content, especially on smaller screens.
ExampleGmail's mobile "Compose" FAB stays fixed in the corner while scrolling an inbox, because composing a new email is the single most frequent primary action in that context.