按钮支持 default
、primary
、info
、success
、warning
、danger
六种颜色,默认为 default
。
<Button color="primary">主要按钮</Button>
<Button color="info">信息按钮</Button>
<Button color="success">成功按钮</Button>
<Button color="warning">警告按钮</Button>
<Button color="danger">危险按钮</Button>
<Button color="default">默认按钮</Button>
通过 variant="text"
属性将按钮设置为文本按钮。
<Button variant="text" color="primary">主要按钮</Button>
<Button variant="text" color="info">信息按钮</Button>
<Button variant="text" color="success">成功按钮</Button>
<Button variant="text" color="warning">警告按钮</Button>
<Button variant="text" color="danger">危险按钮</Button>
<Button variant="text" color="default">默认按钮</Button>
通过 variant="contained"
属性将按钮设置为轮廓按钮。
<Button variant="outlined" color="primary">主要按钮</Button>
<Button variant="outlined" color="info">信息按钮</Button>
<Button variant="outlined" color="success">成功按钮</Button>
<Button variant="outlined" color="warning">警告按钮</Button>
<Button variant="outlined" color="danger">危险按钮</Button>
<Button variant="outlined" color="default">默认按钮</Button>
设置 hairline
属性可以展示 0.5px 的细边框。
<Button variant="outlined" color="primary" hairline>主要按钮</Button>
<Button variant="outlined" color="info" hairline>信息按钮</Button>
<Button variant="outlined" color="success" hairline>成功按钮</Button>
<Button variant="outlined" color="warning" hairline>警告按钮</Button>
<Button variant="outlined" color="danger" hairline>危险按钮</Button>
<Button variant="outlined" color="default" hairline>默认按钮</Button>
通过 disabled
属性来禁用按钮,禁用状态下按钮不可点击。
<Button variant="contained" color="primary" disabled>主要按钮</Button>
<Button variant="contained" color="info" disabled>信息按钮</Button>
<Button variant="contained" color="success" disabled>成功按钮</Button>
<Button variant="contained" color="warning" disabled>警告按钮</Button>
<Button variant="contained" color="danger" disabled>危险按钮</Button>
<Button variant="contained" color="default" disabled>默认按钮</Button>
通过 loading
属性设置按钮为加载状态,可以通过 {type: "spinner"}
设置加载类型。
<Button color="success" loading />
<Button color="success" loading={{ type: "spinner" }} />
<Button color="primary" loading>加载中...</Button>
通过 shape="square"
设置方形按钮,通过 shape="round"
设置圆形按钮。
<Button variant="contained" color="primary" shape="square">方形按钮</Button>
<Button variant="contained" color="primary" shape="round">圆形按钮</Button>
通过 icon
属性设置按钮图标,支持 Icon 组件里的所有图标,也可以传入图标 URL。
<Button variant="contained" color="primary" icon={<DoneOutlined />} />
<Button variant="contained" color="primary" icon={<DoneOutlined />}>主要按钮</Button>
<Button variant="outlined" color="primary" icon={<DoneOutlined />} iconPosition="right">轮廓按钮</Button>
支持 large
、medium
、small
、mini
四种尺寸,默认为 medium
。
<Button color="primary" size="large">大号按钮</Button>
<Button color="primary" size="medium">普通按钮</Button>
<Button color="primary" size="small">小型按钮</Button>
<Button color="primary" size="mini">迷你按钮</Button>
通过 css
属性可以自定义按钮的颜色。
<Button style={{ backgroundColor: "#7232dd", color: "#fff" }}>单色按钮</Button>
<Button style={{ borderColor: "#7232dd", color: "#7232dd" }}>单色按钮</Button>
<Button style={{ background: "linear-gradient(to right, #ff6034, #ee0a24)", color: "#fff" }}>渐变色按钮</Button>
<Button.Group variant="contained" color="primary" shape="round">
<Button> <ArrowLeft /> 上一步</Button>
<Button> <Replay /> 刷新</Button>
<Button>下一步 <Arrow /></Button>
</Button.Group>
<Button.Group variant="outlined" shape="round" size="small">
<Button> <ArrowLeft /> 上一步</Button>
<Button><Replay /> 刷新</Button>
<Button>下一步 <Arrow /></Button>
</Button.Group>
<Button.Group variant="text" color="primary" shape="round">
<Button> <ArrowLeft /> 上一步</Button>
<Button> <Replay /> 刷新</Button>
<Button>下一步 <Arrow /></Button>
</Button.Group>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
variant | 按钮变种,可选值为 contained text outlined | string | contained |
color | 按钮颜色,可选值为 primary success warning danger | string | default |
size | 尺寸,可选值为 large small mini | string | medium |
shape | 按钮形状,可选值为 square round | string | square |
icon | 左侧图标或图片 | ReactNode | - |
iconPosition | 图标展示位置,可选值为 right | string | left |
formType | 原生 button 标签的 type 属性 | string | button |
block | 是否为块级元素 | boolean | false |
disabled | 是否禁用按钮 | boolean | false |
hairline | 是否使用 0.5px 边框 | boolean | false |
loading | 是否显示为加载状态 | boolean | LoadingProps | false |
children | 按钮文字 | string | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
variant | 按钮变种,可选值为 contained text outlined | string | contained |
color | 按钮颜色,可选值为 primary success warning danger | string | default |
size | 尺寸,可选值为 large small mini | string | medium |
shape | 按钮形状,可选值为 round | string | square |
block | 是否为块级元素 | boolean | - |
disabled | 是否禁用按钮 | boolean | - |
hairline | 是否使用 0.5px 边框 | boolean | - |
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
—button-line-height | 1.2 | - |
—button-border-width | var(—border-width-base) | - |
—button-border-radius | var(—border-radius-sm) | - |
—button-border-radius-max | var(—border-radius-max) | - |
—button-transition-duration | var(—animation-duration-fast) | - |
—button-disabled-opacity | var(—disabled-opacity) | - |
—button-loading-icon-size | 20px * $hd | - |
—button-height-mini | 24px * $hd | - |
—button-padding-mini | 0 var(—padding-base) | - |
—button-font-size-mini | var(—font-size-xs) | - |
—button-height-small | 32px * $hd | - |
—button-padding-small | 0 var(—padding-xs) | - |
—button-font-size-small | var(—font-size-sm) | - |
—button-height-medium | 44px * $hd | - |
—button-padding-medium | 0 var(—padding-md) | - |
—button-font-size-medium | var(—font-size-md) | - |
—button-height-large | 50px * $hd | - |
—button-font-size-large | var(—font-size-lg) | - |
—button-default-color | var(—text-color) | - |
—button-default-background-color | var(—white) | - |
—button-default-border-color | var(—border-color) | - |
—button-primary-color | var(—white) | - |
—button-primary-background-color | var(—primary-color) | - |
—button-primary-border-color | var(—button-primary-background-color) | - |
—button-info-color | var(—white) | - |
—button-info-background-color | var(—info-color) | - |
—button-info-border-color | var(—button-info-background-color) | - |
—button-success-color | var(—white) | - |
—button-success-background-color | var(—success-color) | - |
—button-success-border-color | var(—button-success-background-color) | - |
—button-warning-color | var(—white) | - |
—button-warning-background-color | var(—warning-color) | - |
—button-warning-border-color | var(—button-warning-background-color) | - |
—button-danger-color | var(—white) | - |
—button-danger-background-color | var(—danger-color) | - |
—button-danger-border-color | var(—button-danger-background-color) | - |