Icon Button 图标按钮
用紧凑图标承载关闭、收藏或更多选项等单一操作。
使用概览
适合使用
- 操作含义可由通用图标清楚表达且空间有限时。
不建议使用
- 图标含义可能歧义且无法提供可见文字说明时。
真实示例
关闭图标按钮
使用可访问名称补足图标的操作语义。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/icon-button.json基础用法
导入
import { IconButton } from "@richardqiu/quartz/icon-button";JSX
<IconButton aria-label="关闭通知">×</IconButton>状态与控制摘要
默认
悬停
键盘焦点可见
激活
已禁用
加载中
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
aria-label | string | 必填 | 为无可见文字的图标按钮提供可访问名称。 |
size | "sm" | "md" | "lg" | "md" | 控制按钮视觉尺寸，同时保留可操作命中区域。 |
组合结构
- 01
IconButton
键盘约定
- Enter 或空格键激活图标按钮。
可访问性契约
- 图标本身不能充当可访问名称，必须提供 aria-label 或 aria-labelledby。
- 额外的视觉提示应显式组合 Tooltip。