BUTTON
图标按钮Icon Button
只有图标没有文字的方形按钮，省空间但必须配 tooltip 说明含义。
效果预览
适合用在哪
工具栏、卡片右上角操作区、表格行内操作、导航折叠。
容易踩的坑
- 只放图标不加 aria-label，读屏只会念出「按钮」，用户无从得知功能。
- 28px 小尺寸直接用于移动端，点击热区远低于 44×44px，误触率很高。
- 用冷门或自造图标表达「归档」「同步」等抽象动作，没有 tooltip 时用户只能猜。
设计提示词 · Prompt
图标按钮（Icon Button）：正方形，尺寸三档——28/36/44px，圆角 8-10px，图标居中占 50-60%。四种视觉变体：描边（白底 1px 边框）、浅底（灰底无边框）、实心（深色或品牌底）、幽灵（透明底，悬停才出现浅灰底）。悬停反馈必须明显：背景变化 + 图标颜色加深，可再加 1.05 倍缩放。无文字的图标按钮必须配 aria-label 和 tooltip——用户猜不出图标含义就是这个设计的失败。
Icon Button: square, in three sizes — 28/36/44px, border radius 8-10px, icon centered occupying 50-60%. Four visual variants: outlined (white background, 1px border), soft (gray background, no border), solid (dark or brand background), ghost (transparent background, light gray background appears only on hover). Hover feedback must be obvious: background change + darker icon color, optionally a 1.05x scale. Icon buttons without text must have an aria-label and a tooltip — if users can't guess what the icon means, the design has failed.
常见搭配
同一页面里经常和「图标按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-iconrow"> <button class="d-iconbtn2">✎</button> <button class="d-iconbtn2 d-iconbtn2--soft">⧉</button> <button class="d-iconbtn2 d-iconbtn2--gd">＋</button> <button class="d-iconbtn2">⋯</button> </div>