Button 按钮

文本按钮,7 视觉变体 × 3 尺寸 · 支持块级 / 内联。变体:primary 主操作 · secondary 次操作 · ghost 透明底品牌橙字 · neutral 透明底主文字色(多 icon 场景避免全染主橙)· outline 白底灰边 · danger 破坏性操作 · text 纯文字。

实时预览

下方渲染的就是 src/components/ui/Button/Button.tsx 本体，通过 react-native-web 翻译成浏览器节点。

Button · 变体

Button · 尺寸

状态

用法

import { Button } from '@unif/react-native-design';

<Button label="确认" variant="primary" onPress={...} />
<Button label="取消" variant="secondary" />
<Button label="查看详情" variant="outline" />
<Button label="重新发起" variant="text" size="sm" />
<Button label="提交" variant="primary" block size="lg" />

API

Prop	Type	默认	说明
label	string	—	按钮文字(icon-only 场景请用 IconButton)
onPress	() => void	—	点击回调;disabled / loading 时不触发
size	'sm' | 'md' | 'lg'	'md'	高度 28 / 36 / 44
variant	'primary' | 'secondary' | 'ghost' | 'neutral' | 'outline' | 'danger' | 'text'	'primary'	视觉变体
block	boolean	false	撑满父容器宽度（alignSelf: stretch + flexGrow: 1）
disabled	boolean	false	禁用（opacity 0.5 + 不响应 onPress）
loading	boolean	false	加载态:用 ActivityIndicator 替代 label,自动 disabled
leftIcon	IconName	—	左侧图标,与文本同色同高
rightIcon	IconName	—	右侧图标,与文本同色同高
style	StyleProp<ViewStyle>	—	额外样式覆盖（merge 到末尾）
testID	string	—	E2E / 测试定位
accessibilityHint	string	—	SR 行为说明 hint,仅在「行为不显然」时加

无障碍（a11y）

来源：src/components/ui/Button/ButtonBase.tsx、Button.tsx、types.ts。

• 默认 accessibilityRole：'button'（在 ButtonBase 中硬编码，accessibilityRole = 'button'）。
• a11y props：accessibilityLabel 自动取自必填的 label（<ButtonBase accessibilityLabel={label}>），无需另传；accessibilityHint 可选，仅在「行为不显然」时补充（如「切换主题」）。
• 状态语义：accessibilityState.disabled 取 !isInteractive，即 disabled 或 loading 任一为真时都会上报 disabled（loading 时 label 被 ActivityIndicator 替换）。

// label 即 a11y label;hint 仅在行为不显然时补
<Button label="确认" variant="primary" onPress={...} />
<Button label="切换" accessibilityHint="切换深浅主题" onPress={...} />

主题键（Tokens）

读取来源：src/components/ui/Button/styles.ts、ButtonBase.tsx。

Token	来源	variant / 说明
c.primary	useColors()	primary 变体背景色；ghost / text 变体文字色
c.onPrimary	useColors()	primary 变体文字/图标色
c.surfaceContainerHigh	useColors()	secondary 变体背景色
c.foreground	useColors()	secondary / neutral / outline 变体文字色
c.surface	useColors()	outline 变体背景色
c.outline	useColors()	outline 变体边框色
c.error	useColors()	danger 变体背景色
c.onError	useColors()	danger 变体文字色
radius.lg / radius.md / radius.sm	静态 token	按 size='lg'/'md'/'sm' 对应圆角
control.lg / control.md / control.sm	静态 token（src/theme）	按尺寸对应高度（44 / 36 / 28）
space['6'] / space['4']	静态 token	md / sm 水平内边距(lg 用 r(18))
space['2'] / space['1']	静态 token	内容 gap(lg/md 用 '2',sm 用 '1')
fw.semi	静态 token	按钮文字字重（600）
type.body / type.sm / type.xxs	静态 token	按 size='lg'/'md'/'sm' 对应字号