Button 按钮
常用的操作按钮。
视觉变体
四种变体覆盖从主操作到次要操作的层级。primary 使用渐变主色，是全页面仅应出现一次的主操作。
vue
<SrButton>默认按钮</SrButton>
<SrButton variant="primary">主要按钮</SrButton>
<SrButton variant="danger">危险按钮</SrButton>
<SrButton variant="ghost">幽灵按钮</SrButton>尺寸
三档离散尺寸，不使用任意值，避免与设计令牌脱钩。
vue
<SrButton size="sm" variant="primary">小按钮</SrButton>
<SrButton size="md" variant="primary">中按钮</SrButton>
<SrButton size="lg" variant="primary">大按钮</SrButton>禁用与加载
加载中同样不可点击，避免重复提交。
vue
<SrButton disabled>禁用</SrButton>
<SrButton variant="primary" loading>加载中</SrButton>占满一行
vue
<SrButton variant="primary" block>占满一行的按钮</SrButton>原生 type
nativeType 对应原生 type 属性。在 SrForm 内提交表单时需设为 submit。
vue
<SrButton native-type="submit" variant="primary">提交</SrButton>Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸 |
variant | 'default' | 'primary' | 'danger' | 'ghost' | 'default' | 视觉变体 |
disabled | boolean | false | 是否禁用 |
loading | boolean | false | 是否加载中（同样不可点击） |
block | boolean | false | 是否占满一行 |
nativeType | 'button' | 'submit' | 'reset' | 'button' | 原生 type 属性 |
插槽
| 名称 | 说明 |
|---|---|
default | 按钮内容 |
无障碍
- 可点击元素支持键盘聚焦并保留可见 focus 环（使用
outline，在高对比度模式下依然可见） - 悬停效果包在
@media (hover: hover)内，触摸设备不会出现「点击后样式卡住」的假反馈