Duplicate
图标按钮是什么？
图标按钮用字形换掉文字。点名点击区尺寸、形状，以及读屏软件读到的标签。
变体
点击属性即可在预览中高亮。
- 在 Prompt 里写明这个类型。
- 在 Prompt 里写明这个类型。
- 在 Prompt 里写明这个类型。
- 给具体值，不要只给感觉词。
- 给具体值，不要只给感觉词。
- 仅含单个图标、无文字的按钮，必须配 aria-label。
- 字段的名称文字，简短并置于输入框上方。
- 不可交互的控件，置灰且不可聚焦。
状态
点击属性即可在预览中高亮。
- 输入或报错前字段的默认有效状态。
- 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
- 键盘聚焦状态：清晰的焦点环或边框变化，永远不要去掉。
- 在 Prompt 里写明这个状态。
- 不可交互的控件，置灰且不可聚焦。
结构解剖
这些是 Prompt 里应该点名的部件。
- 01 底板
- 02 字形
- 03 焦点环
什么时候用
- 工具栏里反复出现的操作：加粗、对齐、分享
- 密集表格与列表中的行内操作
- 卡片与吐司里的关闭、移除入口
什么时候别用
- 图标不够通用——补一个文字标签
- 它是页面唯一的主操作——改用按钮
- 同一角落放两个含义不同的图标
Write the aria-label before picking the glyph — if you cannot name the action in two words, the icon is wrong.
Create an icon button component.
STYLE
- square 36px surface, 10px radius, 20px glyph
- neutral: transparent surface, #6E6E73 glyph, #F5F5F7 hover
- one primary icon button: #0071E3 surface, white glyph
- 2px focus ring in accent, offset 2px
STATES
- default, hover, focus-visible, active, disabled at 40% opacity
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui