Floating Action Button
A prominent circular button that floats above the content layer to represent the primary, most frequent action on a screen.
Plain English
The FAB is the most prominent element on any screen that has one. It floats above other content via elevation (shadow and z-index), visually communicating "this is the main thing you can do here." Write a new message. Add a new item. Start a new session. The rule is one FAB per screen — if you need multiple primary actions, use a menu instead. The extended FAB (icon + label) is better for onboarding since users learn what the icon means, after which the icon-only FAB is familiar and compact. Position is conventional: bottom-right on desktop, bottom-center for single-handed mobile use.
Technical
Standard: position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent-500); box-shadow: 0 6px 12px rgba(0,0,0,0.2); z-index: 50; display: flex; align-items: center; justify-content: center. Extended: border-radius: 28px; padding: 0 20px; width: auto; gap: 8px; white-space: nowrap. Hover: transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.3). Mini FAB: 40px × 40px.
Live Demo
Floating action button variants
Size variants
Mini (40px)
Standard (56px)
Extended
One FAB per screen — click the interactive FAB above to toggle extended/standard.
Usage
✓ Good usage
A messaging app with a single pencil-icon FAB at the bottom right that opens a new conversation — one clear action, high visibility, always reachable.
✗ Bad usage
Three FABs on the same screen for "New post," "New story," and "New reel" — multiple FABs compete for primacy and none feels dominant.
Recommended values
- Standard size: 56px × 56px
- Mini size: 40px × 40px
- Extended: 48px height, auto width, 20px side padding
- Shadow: 0 6px 16px rgba(0,0,0,0.2)
- Hover elevation: translateY(-2px) + stronger shadow
- Z-index: 50 (above most content, below modals at 100+)
Common mistakes
- Multiple FABs — the FAB represents one primary action; two or more FABs means the information architecture needs rethinking.
- FAB over important content — a fixed FAB can obscure list items; ensure the last item has enough padding to scroll clear of the FAB.
- No label on first use — icon-only FABs require the user to already know the app; use an extended FAB with a label during onboarding.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add a floating action button to the dashboard screen. Position it fixed at bottom-right (24px from edges). Use a + icon with an accent background. On hover, extend to show "+ New item" text with a smooth width transition. On desktop show extended by default. On mobile (< 640px) collapse to icon-only. Add bottom padding of 88px to the last list item so it's never hidden behind the FAB.