Extended FAB
扩展悬浮按钮
The hallmark floating button of Material Design 3 — displaying icon and label at rest, collapsing into a circular icon on scroll.
Live Demo
Actually clickableWhat you just saw:The oval pill "Compose" button at the bottom-right of Gmail mobile that collapses into a pencil circle when scrolling through emails.
What it actually is
Extended Floating Action Button is a core Material Design 3 component representing the primary constructive action on a screen (e.g. Compose, New Task, Add). It resolves the cognitive ambiguity of icon-only FABs by presenting an explicit text label alongside the icon. When the user scrolls down, it smoothly collapses into a circular icon to maximize content readability, re-expanding when idle.
Anatomy · What it's made of
Container椭圆胶囊容器
MD3 default 56px height capsule with 16px corner radius
Icon操作图标
24px leading vector icon such as plus or edit
Label操作文案
Action verb label like Compose or Create
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The screen has one dominant constructive action (New Email, Create Post, Add Task) | Yes |
| An icon alone is ambiguous and requires clear text to avoid hesitation | Yes |
| Long scrolling feeds where the button should collapse to save vertical space | Yes |
| Screens with multiple competing primary actions | No |
Never place two floating action buttons on the same screen.
Ensure a generous bottom padding (pb-24) on the scrollable container so content is never occluded.
Similar Patterns
Don't mix these upExtended FABCurrent
扩展悬浮按钮
The hallmark floating button of Material Design 3 — displaying icon and label at rest, collapsing into a circular icon on scroll.
FAB
浮动操作按钮
The round button that floats in the corner of the screen, usually carrying the "create" action.
In one line:The hallmark floating button of Material Design 3 — displaying icon and label at rest, collapsing into a circular icon on scroll.
FAB
浮动操作按钮
The round button that floats in the corner of the screen, usually carrying the "create" action.
CTA
行动号召按钮
The single most important button on the page — it is the one thing you want the user to do next.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
How to tell AI
Three levels of promptAdd the component name and specifics
Build a Material Design 3 Extended FAB: floating bottom-right capsule with icon and text label, collapsing into a circle when scrolling down, and re-expanding when idle.
Don't just say this to AI
Bad → BetterDon't say this to AI
Pin a big button with text to the bottom right.
Say this instead
Follow Material Design 3 Extended FAB specification: bottom-right capsule at rest, collapsing to circular icon during scroll, with appropriate content bottom inset.
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.