按钮用于触发一个操作,如提交表单或打开对话框。不同样式的按钮可以传达不同的语义和优先级。
按钮分为三种类型样式,分别为:System button(系统按钮)、Primary color button(主色按钮)、Warning button(警示按钮)。
按钮可以嵌入图标,通过 iconPosition 参数控制图标位置。设置 icon 而不设置 text 时,按钮宽高相等为方形。
按钮分为:小、中、大,三种尺寸;左侧 icon 尺寸分别为大 16、中 16、小 14。
按钮级别分为三个等级:Primary(一级)、Secondary(二级)、Tertiary(三级)。
按钮的禁用状态。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| text | 按钮文字 | string | - | 'button' |
| type | 按钮类型 | string | 'button' | 'submit' | 'reset' | 'button' |
| variant | 按钮样式类型 | string | 'system' | 'primary' | 'warning' | 'system' |
| level | 按钮级别 | string | 'primary' | 'secondary' | 'tertiary' | 'primary' |
| size | 按钮尺寸 | string | 'large' | 'default' | 'small' | 'large' |
| disabled | 是否禁用 | boolean | true | false | false |
| icon | 图标 HTML | string | - | null |
| iconPosition | 图标位置 | string | 'left' | 'right' | 'only' | 'left' |
| iconSize | 图标尺寸(像素) | number | - | null |
| onClick | 点击事件回调 | function | - | null |
| className | 自定义类名 | string | - | '' |
| id | 自定义 id | string | - | '' |
| dataState | 自定义 data-state 属性 | string | - | null |