使用说明
根据需求,定义按钮的功能逻辑,用不同的颜色表达按钮的主次信息,并在文案中明确描述其功能。
结合场景,选择对应尺寸与组合方式,如小尺寸按钮、组合按钮等。
使用规则
带边的: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 |