Button 按钮

主 / 次 / 描边 / 文字 · 3 种尺寸 · 块级 / 内联。

实时预览

下方渲染的就是 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	—	按钮文字
variant	'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'text'	'primary'	视觉变体
size	'sm' | 'md' | 'lg'	'md'	高度 28 / 36 / 44
block	boolean	false	是否块级（flexGrow: 1）
disabled	boolean	false	禁用（opacity 0.5）
loading	boolean	false	显示 spinner
onPress	() => void	—	点击回调