Floating Action Button
悬浮按钮
Aliases:悬浮按钮浮动按钮悬浮球右下角那个圆按钮FABfloating action button
What is it
A circular button anchored to a corner of the viewport, floating above the content and carrying the one primary action of the current view (create, compose, scan). Shadow and placement declare "I sit above everything" — louder than an inline primary button, but there should be only one per screen. On click it may expand into a labeled bar or fan out into a set of quick actions.
Name disambiguation
A FAB is not "a louder primary button": a primary button lives inside the layout and scrolls with content; a FAB detaches from the flow, stays pinned to a corner and overlays content. The test is whether it floats above scrolling content — not how bright its color is.
Interactive playground
Try it. Make an informed choice.Tap the corner FAB, fan out the sub-actions and retract; watch how it layers over content.
Loading lab…
What to look for
- 01The button floats above scrolling content and stays unoccluded
- 02Every fanned-out sub-action is keyboard reachable
✓ When to use
- The view has one frequent, constructive primary action (create, compose)
- A persistent entry point in the bottom thumb zone
- A tool-like surface needs a stronger call to action than an inline button
✕ When not to use
- Several co-equal primary actions — they cancel out; use a bottom action bar
- Destructive actions (delete, wipe)
- It would cover key content or the bottom navigation
Variants
Single
单一圆形
Icon-only circle — the classic form
Extended
扩展标签
Icon plus label — a clearer call to action
Speed dial
快捷扇出
Fans out several sub-actions on click, retracts on second click
Implementation
position: fixedborder-radiusbox-shadowtransformtransitionAnchor the corner with position: fixed (or absolute outside the scroller); make it circular with border-radius: 9999px; elevation comes from layered box-shadows, not outlines. Speed-dial actions stagger in with scale + opacity while the main button rotates 45° into a close affordance. Press feedback is scale(0.94); keep the touch target ≥ 48px; respect prefers-reduced-motion.
Platform API
<button>positionbox-shadowaria-expandedIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
Related concepts
A clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAlternativeWhen users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.
MotionUsed withA translucent circle expands from the exact tap point and fades out, visualising where the press landed. Material Design's signature press feedback — it gives clicks a physical sense, like a stone dropped on water.
MotionUsed with