BUTTON
图标文字按钮Icon Label Button
图标在左、文字在右，主按钮和次按钮用同一套尺寸，图标跟着文字变色。
效果预览
适合用在哪
下载、分享、联系销售，以及任何图标能缩短理解时间的主操作。
容易踩的坑
- 加了图标就把按钮加高，和同一行的纯文字按钮对不齐。
- 图标颜色写死，悬停文字变了图标还是原来的颜色。
- 放一个和文案无关的装饰图标，读屏隐藏了图标之后，明眼用户反而更迷惑。
设计提示词 · Prompt
图标文字按钮（Icon Label Button）：图标在左、文字在右，间距 6-8px，图标 16px，与文字垂直居中。主按钮实心、次按钮描边，高度、圆角、左右内边距与纯文字按钮完全一致，不要因为加了图标就加高。图标用 currentColor，悬停时跟文字一起变色。装饰性图标加 aria-hidden，可访问名称来自旁边的文字。图标要替文字省掉一个词（下载、邮件、外部链接），不要再放一个和文案无关的装饰。
Icon Label Button: icon on the left, label on the right, 6-8px gap, 16px icon, vertically centered with the text. The solid primary and the outlined secondary share the exact height, radius and horizontal padding of a text-only button — don't grow the control just because an icon was added. The icon uses currentColor so it recolors with the label on hover. Decorative icons are aria-hidden; the accessible name comes from the text. The icon should save a word the label would otherwise need (download, mail, external link), not add an unrelated ornament.
常见搭配
同一页面里经常和「图标文字按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-iconlabel"> <button class="d-btn d-btn--p" type="button"><span class="d-il__ic" aria-hidden="true">↓</span>下载报告</button> <button class="d-btn d-btn--g" type="button"><span class="d-il__ic" aria-hidden="true">✉</span>联系销售</button> </div>