使用说明
根据需求,定义按钮的功能逻辑,用不同的颜色表达按钮的主次信息,并在文案中明确描述其功能。
结合场景,选择对应尺寸与组合方式,如小尺寸按钮、组合按钮等。
使用规则
带边的:Button
不带边的纯Icon的:Icon Button
不带边的纯文字的或Icon+文字的:Text Button
根据需求,定义按钮的功能逻辑,用不同的颜色表达按钮的主次信息,并在文案中明确描述其功能。
结合场景,选择对应尺寸与组合方式,如小尺寸按钮、组合按钮等。
带边的:Button
不带边的纯Icon的:Icon Button
不带边的纯文字的或Icon+文字的:Text Button
设置按钮的 type 属性值为 primary、normal、secondary、tertiary,从而呈现不同的颜色状态。
Primary 类型: medium 和 large 两种尺寸
Primary 类型: default 和 gray 两种配色
Secondary 类型: medium 和 large 两种尺寸
Tertiary 类型: medium 和 large 两种尺寸
Secondary 类型: default 和 gray 两种配色
Disabeld 禁用状态
自定义图标
单独以图标为按钮
Button 可以嵌入 Icon,默认情况下 Icon 尺寸自动跟随 Button 的尺寸。如果用户想要控制 Icon 的大小,可以通过 iconSize 属性进行设置。
可以通过设置 size 属性控制按钮的尺寸,可选值为 large medium small xs,其中默认值为 medium。
设置按钮的 warning 属性值为 true 来表示该按钮操作具有危险性。
通过设置 loading 属性即可以让按钮处于加载状态。
添加 disabled 属性即可让按钮处于不可用状态,同时按钮样式也会改变。
默认情况下 Button 组件使用 <button> 标签来渲染按钮,通过 component 属性可以自定义 Button 的标签类型。
可选值为 button 和 a。
通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:type -> shape -> size -> loading -> disabled
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 按钮的尺寸 | 'xs' | 'small' | 'medium' | 'large' | medium |
| type | 按钮的类型 | 'primary' | 'secondary' | 'normal' | normal |
| iconSize | 按钮中 Icon 的尺寸,用于替代 Icon 的默认大小 | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | - |
| htmlType | 当 component = 'button' 时,设置 button 标签的 type 值 | 'submit' | 'reset' | 'button' | button |
| component | 设置标签类型 | 'button' | 'a' | 'div' | 'span' | button |
| loading | 设置按钮的载入状态 | Boolean | false |
| ghost | 是否为幽灵按钮 | Boolean | 'light' | 'dark' | false |
| text | 是否为文本按钮 | Boolean | false |
| warning | 是否为警告按钮 | Boolean | false |
| disabled | 是否禁用 | Boolean | false |
| onClick | 点击按钮的回调 | Function(e: Object) => void | () => {} |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 图标名字 | string | - |
| size | 按钮的尺寸 | 'medium', 'large' | medium |
| htmlType | 当 component = 'button' 时,设置 button 标签的 type 值 | 'submit' | 'reset' | 'button' | button |
| component | 设置标签类型 | 'button' | 'a' | 'div' | 'span' | button |
| type | 按钮的类型 | 'primary', 'secondary', 'normal' | normal |
| color | 按钮的颜色 | 'default', 'gray' | default |
| disabled | 是否禁用 | Boolean | false |
| onClick | 点击按钮的回调 | Function(e: Object) => void | () => {} |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 统一设置 Button 组件的按钮大小 | 'xs' | 'small' | 'medium' | medium |