Components / 操作
Icon Button
定义图标按钮的结构、状态、Token 和使用边界。
结构
组成部分
- 01至少 44px 的命中区域
- 02居中图标
- 03无障碍名称
- 04焦点指示器
预览
交互调整
强调色使用受限
<IconButton />外观
视觉样式
- 默认
- 轻量
- 强调
尺寸
规格
- 小
- 中
- 大
状态
交互状态
内容
使用规则
建议
- 始终提供 aria-label。
- 同一工具栏使用统一图标描边。
避免
- 不要只依赖工具提示提供名称。
- 不要把可点击区域缩到图标本身。
Token
组件映射
| 名称 | 类型 | 浅色 | 深色 | 预览 |
|---|---|---|---|---|
component.iconbutton.background.rest图标按钮默认背景 | color | oklch(1 0 0) | oklch(0.29 0.003 255) | |
component.iconbutton.background.hover图标按钮悬停背景 | color | oklch(0.95 0 255) | oklch(0.38 0.007 255) | |
component.iconbutton.background.selected图标按钮选中背景 | color | oklch(0.368 0.161 261.395) | oklch(0.82 0.052 261.395) | |
component.iconbutton.text.default图标按钮文字 | color | oklch(0.2 0.001 255) | oklch(0.98 0 255) | |
component.iconbutton.border.default图标按钮边框 | color | oklch(0.82 0.004 255) | oklch(0.47 0.01 255) | |
component.iconbutton.radius图标按钮圆角 | dimension | 0.625rem | 0.625rem | Aa |
component.iconbutton.motion.duration图标按钮交互动效 | duration | 120ms | 120ms | Aa |
无障碍
语义与键盘
无障碍
- 使用原生语义或完整实现对应 ARIA 模式。
- 提供可见焦点和不依赖颜色的状态提示。
键盘
- Tab 进入或离开组件。
- Enter 或 Space 执行当前操作。
属性与接口
公开接口
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
aria-label | string | 必填 | 图标按钮名称。 |
appearance | ButtonAppearance | filled | 按钮外观。 |
size | sm | md | lg | md | 按钮尺寸。 |
<IconButton aria-label="搜索" appearance="outline"><Search /></IconButton>