FAB
浮动操作按钮
The round button that floats in the corner of the screen, usually carrying the "create" action.
Live Demo
Actually clickablePage content (this can scroll a long way)
What you just saw:The round button with a plus in the bottom-right of Google Material apps, the "+" publish button on Xiaohongshu (RED), the pencil in the bottom-right of a notes app — all FABs.
What it actually is
The FAB is designed as a shortcut that is always within thumb reach. It sits in the bottom-right of the app: the benefit is that it breaks out of the hierarchy and is always available; the cost is that it covers content and permanently occupies visual attention.
Anatomy · What it's made of
Surface圆形底
56×56px, with a shadow to reinforce the floating feel
Icon图标
24px, centered
Position位置
16px from the bottom-right plus the safe area
Extended展开态
The extended FAB with a text label
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| There is one high-frequency primary action on mobile (create / capture / log) | Yes |
| That action should be reachable from several levels of pages | Yes |
| The page is a long scrolling list | Yes |
| The toolbar already has a primary button | No |
| The primary action would cover critical content at the bottom | No |
Adding a FAB on top of a layout with 5 or fewer tabs is redundant — "create" usually belongs in the bottom navigation.
It always floats above everything, so a position that is too low covers the last row of the list.
Similar Patterns
Don't mix these upFABCurrent
浮动操作按钮
The round button that floats in the corner of the screen, usually carrying the "create" action.
Bottom Navigation
底部导航栏
The row of icon buttons pinned to the bottom of an app, switching between 3–5 top-level destinations.
In one line:The round button that floats in the corner of the screen, usually carrying the "create" action.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
Bottom Navigation
底部导航栏
The row of icon buttons pinned to the bottom of an app, switching between 3–5 top-level destinations.
CTA
行动号召按钮
The single most important button on the page — it is the one thing you want the user to do next.
Drawer
抽屉
A panel that slides in from the edge of the screen, usually from the side, sometimes from the bottom.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a FAB in the bottom-right of the mobile page: a circle with a plus icon that creates new content. It stays fixed while a long list scrolls and does not scroll away with the content.
Don't just say this to AI
Bad → BetterDon't say this to AI
Put a plus sign in the bottom-right corner.
Say this instead
Add a FAB in the bottom-right on mobile: 56px circle, dark solid, Plus icon, shadow for depth, aria-label="Create", with bottom offset accounting for the bottom navigation height and the safe area.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.