IconButton 图标按钮
只放 icon 的方形按钮,常用于 NavBar 左右 slot、卡片右上 action、列表行 trailing。区别于 Button,IconButton 没文本,必须显式传 accessibilityLabel 给 SR 用户。
size 走 ButtonSize(sm/md/lg = 28/36/44),variant 走 ButtonVariant(默认 'ghost' 透明底)。
实时预览
下方渲染的就是 src/components/ui/IconButton/IconButton.tsx 本体。
size · sm 28 / md 36 / lg 44
variant · neutral 中性 / primary 橙底 / ghost 透明
disabled · opacity 0.5 + 不响应
用法
import { IconButton } from '@unif/react-native-design';
{/* NavBar 右侧扫码按钮 */}
<IconButton
icon="scan"
size="md"
variant="neutral"
accessibilityLabel="扫码"
accessibilityHint="打开二维码扫描"
onPress={() => navigation.navigate('Scanner')}
/>
{/* 卡片右上关闭 */}
<IconButton
icon="close"
size="sm"
variant="ghost"
accessibilityLabel="关闭"
onPress={onClose}
/>
API
| Prop | Type | 默认 | 说明 |
|---|---|---|---|
icon | IconName | — | 图标名(来自 @/components/ui/Icon catalog) |
size | 'sm' | 'md' | 'lg' | 'md' | 方形边长 28 / 36 / 44 |
variant | ButtonVariant | 'ghost' | 视觉变体,跟 Button 同一套 palette |
color | string? | variant fg | icon 描色 override(仅 icon 色,bg/border 仍由 variant 决定) |
disabled | boolean | false | 不响应 + opacity 0.5 |
accessibilityLabel | string | — | 必填 —— icon-only 按钮 SR 用户唯一信息源 |
accessibilityHint | string? | — | 行为不显然时填(如"打开扫描器") |
onPress | () => void | — | 点击回调 |
style | StyleProp<ViewStyle> | — | 容器附加样式 |
testID | string? | — | E2E / 测试定位 |
无障碍（a11y）
来源：src/components/ui/IconButton/types.ts、IconButton.tsx、Button/ButtonBase.tsx。
- 默认
accessibilityRole：'button'（IconButton 透传给共享的ButtonBase，其accessibilityRole = 'button'为默认参数）。 - a11y props：
accessibilityLabel是 TS 强制必填（types.ts中accessibilityLabel: string，无?）—— icon-only 无可见文本，缺则编译报错；accessibilityHint可选，仅在「行为不显然」时补（如「切换密码可见」），普通「确认 / 取消 / 返回」不必加。 - 状态语义：
accessibilityState.disabled取!isInteractive（在ButtonBase内由disabled推导，IconButton 无loading）。
// label 必填(SR 唯一信息源);hint 仅在行为不显然时补
<IconButton icon="scan" accessibilityLabel="扫码" accessibilityHint="打开二维码扫描" onPress={...} />
不要
- 不要把 icon 当装饰用 IconButton —— 装饰用
<Icon>即可,没 hit area 浪费 - 不要在 IconButton 内文字 + icon 混搭 —— 用 Button 的
rightIcon/leftIconprop