COMPONENT 12 · Actions & Menus
图标按钮
Icon Button
也叫Symbol ButtonGlyph Button图标操作NSButton imageOnly
仅用图标表示常见操作的紧凑按钮。
A compact button that represents a familiar action with an icon.
ANATOMY & USAGE
结构与使用建议
组成部分
- 按钮容器
- 图标
- 可访问名称
适合使用
- 操作很常见且空间有限时。
不建议使用
- 图标含义陌生、歧义大或操作风险高时。
键盘与无障碍
- 通过可见文字、aria-label 或 aria-labelledby 提供名称；图标本身设 aria-hidden。
DESCRIBE IT TO AI
这样告诉编程助手
实现图标按钮（Icon Button）：仅用图标表示常见操作的紧凑按钮。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo">
<button type="button" aria-label="收藏">☆</button>
</div>