Icon Button
图标按钮
WebMobileDesktop上手难度: 容易
只有一个图标、没有文字的按钮，必须配 Tooltip 才有意义。
Live Demo
真的可以点你刚才看到的这个：编辑器右上角那一排小图标（加粗、斜体、对齐）、图片右下角的心形和下载键、聊天列表每行的删除叉——都是 Icon Button。
它到底是什么
Icon Button 用空间换清晰度：它能塞进工具栏，但用户必须已经知道这个图标代表什么。所以它的存在前提是——图标足够通用，或者有 Tooltip 兜底。
图标按钮icon button纯图标按钮symbol button
Anatomy · 它由什么组成
Hit Area热区
视觉 32px，热区扩到 44×44px
Icon图标
20–24px，线宽 1.75px 保持一致
Tooltip悬停提示
必填，或加 aria-label
States状态
hover / active / disabled 三态
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 工具栏里需要放很多个操作 | 用 |
| 图标是业界通用符号（搜索、关闭、分享） | 用 |
| 空间极紧（如卡片右上角） | 用 |
| 首次出现的功能、图标含义不直观 | 不用 |
| 这是页面的主操作 | 不用 |
一个需要被「发现」的功能（比如「导出」）不该只用图标——用户得先猜出图标含义。
在中文界面里用单字汉字做图标可读性极差。
Similar Patterns
别搞混一句话区分：只有一个图标、没有文字的按钮，必须配 Tooltip 才有意义。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在编辑器工具栏右侧加一组 Icon Button：加粗 / 斜体 / 删除。删除用 danger 红色，悬停显示 Tooltip。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加几个小图标可以点。
改成这样说
加一组 Icon Button（20px 图标、热区 44×44px），每个都有 aria-label 和悬停 Tooltip，删除用 danger 红色，整组包在 role="toolbar" 里。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。