Extended FAB
扩展悬浮按钮
Material Design 3 的核心悬浮组件——静止时展示图标与文字，页面滚动时自动收起为纯圆点。
Live Demo
真的可以点你刚才看到的这个：Gmail 移动端右下角的「写邮件」椭圆药丸按钮，往下划动列表时文字自动收进圆圈里，停止滑动后重新展开。
它到底是什么
Extended Floating Action Button 是 Google Material Design 3 (MD3) 中用于承载最重要屏幕核心动作（如 Compose、新建、添加）的高阶组件。它克服了经典 FAB 仅有图标导致认知门槛高的缺陷，默认以展开的圆角药丸形式呈现文字与图标；当用户向下浏览内容时，平滑折叠为极简圆形图标，把阅读空间让渡给正文。
Anatomy · 它由什么组成
Container椭圆胶囊容器
MD3 默认高度 56px，圆角 16px
Icon操作图标
左侧 24px 图标，如铅笔、加号
Label操作文案
动词短语，如「Compose」、「新建项目」
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 屏幕内有一个绝对统领全局的核心正向操作（新建邮件、发布动态、创建工单） | 用 |
| 单纯图标难以表达操作含义，必须配合文字消除疑虑 | 用 |
| 列表内容长，向下滚动时需要优雅退缩以扩大阅读视野 | 用 |
| 页面已有多个并列核心动作（容易引发选择冲突） | 不用 |
不要在同一个页面放置两个悬浮按钮，这会完全破坏 Material Design 的层级统一性。
遮挡底部列表关键内容时，必须留出与 FAB 同高的滚动安全垫（pb-24）。
Similar Patterns
别搞混Extended FAB当前
扩展悬浮按钮
Material Design 3 的核心悬浮组件——静止时展示图标与文字，页面滚动时自动收起为纯圆点。
FAB
浮动操作按钮
一直浮在屏幕角落的那个圆形按钮，通常承载「新建」这个动作。
一句话区分：Material Design 3 的核心悬浮组件——静止时展示图标与文字，页面滚动时自动收起为纯圆点。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
实现一个 Material Design 3 风格的 Extended FAB：悬浮在移动端右下角，展开态带有图标和文字「新建记录」，页面向下滚动时平滑过渡收起为纯圆形图标，向上滚动或停止时重新展开。
不要只对 AI 说
Bad → Better不要这样对 AI 说
右下角固定一个大按钮写字。
改成这样说
遵循 Material Design 3 Extended FAB 规范：右下角悬浮药丸形态，静止时展示图标+文字，滚动时平滑折叠为纯图标，留出内容安全边距。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。