Button按钮
Button
按钮
按钮用于开始一个即时操作。
使用import{ Button }from"antd"; |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
在 Ant Design 中我们提供了五种按钮。
以及四种状态属性与上面配合使用。
通过 type 语法糖，使用预设的按钮样式：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。推荐主按钮在同一个操作区域最多出现一次。
调试使用
通过设置 iconPosition 为 start 或 end 分别设置按钮图标的位置。
调试使用
添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 Dropdown.Button 中组合使用。
在 4.0 之后，危险成为一种按钮属性而不是按钮类型。
Debug usage
组件 Token，模仿 MUI 风格的 Button
同时设置 color 和 variant 属性，可以衍生出更多的变体按钮。
可以通过 icon属性添加图标。
调试使用
按钮有大、中、小三种尺寸。
通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸默认为中。
添加 loading 属性即可让按钮处于加载状态，最后三个按钮演示点击后进入加载状态。
幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。
block 属性将使按钮适合其父宽度。
自定义为渐变背景按钮。
通用属性参考：通用属性
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。
按钮的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 autoInsertSpace 为 false 关闭 | boolean | true | 5.17.0 |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
| classNames | 语义化结构 class | Record<SemanticDOM, string> | - | 5.4.0 |
| color | 设置按钮的颜色 | default | primary | danger | - | 5.21.0 |
| danger | 语法糖，设置危险按钮。当设置 color 时会以后者为准 | boolean | false | |
| disabled | 设置按钮失效状态 | boolean | false | |
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
| htmlType | 设置 button 原生的 type 值，可选值请参考 HTML 标准 | submit | reset | button | button | |
| icon | 设置按钮的图标组件 | ReactNode | - | |
| iconPosition | 设置按钮图标组件的位置 | start | end | start | 5.17.0 |
| loading | 设置按钮载入状态 | boolean | { delay: number } | false | |
| shape | 设置按钮形状 | default | circle | round | default | |
| size | 设置按钮大小 | large | middle | small | middle | |
| styles | 语义化结构 style | Record<SemanticDOM, CSSProperties> | - | 5.4.0 |
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
| type | 语法糖，设置按钮类型。当设置 variant 与 color 时以后者为准 | primary | dashed | link | text | default | default | |
| onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
| variant | 设置按钮的变体 | outlined | dashed | solid | filled | text | link | - | 5.21.0 |
支持原生 button 的其他所有属性。
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| borderColorDisabled | 禁用状态边框颜色 | string | #d9d9d9 |
| contentFontSize | 按钮内容字体大小 | number | 14 |
| contentFontSizeLG | 大号按钮内容字体大小 | number | 16 |
| contentFontSizeSM | 小号按钮内容字体大小 | number | 14 |
| contentLineHeight | 按钮内容字体行高 | number | 1.5714285714285714 |
| contentLineHeightLG | 大号按钮内容字体行高 | number | 1.5 |
| contentLineHeightSM | 小号按钮内容字体行高 | number | 1.5714285714285714 |
| dangerColor | 危险按钮文本颜色 | string | #fff |
| dangerShadow | 危险按钮阴影 | string | 0 2px 0 rgba(255, 38, 5, 0.06) |
| defaultActiveBg | 默认按钮激活态背景色 | string | #ffffff |
| defaultActiveBorderColor | 默认按钮激活态边框颜色 | string | #0958d9 |
| defaultActiveColor | 默认按钮激活态文字颜色 | string | #0958d9 |
| defaultBg | 默认按钮背景色 | string | #ffffff |
| defaultBorderColor | 默认按钮边框颜色 | string | #d9d9d9 |
| defaultColor | 默认按钮文本颜色 | string | rgba(0, 0, 0, 0.88) |
| defaultGhostBorderColor | 默认幽灵按钮边框颜色 | string | #ffffff |
| defaultGhostColor | 默认幽灵按钮文本颜色 | string | #ffffff |
| defaultHoverBg | 默认按钮悬浮态背景色 | string | #ffffff |
| defaultHoverBorderColor | 默认按钮悬浮态边框颜色 | string | #4096ff |
| defaultHoverColor | 默认按钮悬浮态文本颜色 | string | #4096ff |
| defaultShadow | 默认按钮阴影 | string | 0 2px 0 rgba(0, 0, 0, 0.02) |
| fontWeight | 文字字重 | undefined | FontWeight | 400 |
| ghostBg | 幽灵按钮背景色 | string | transparent |
| groupBorderColor | 按钮组边框颜色 | string | #4096ff |
| linkHoverBg | 链接按钮悬浮态背景色 | string | transparent |
| onlyIconSize | 只有图标的按钮图标尺寸 | number | 16 |
| onlyIconSizeLG | 大号只有图标的按钮图标尺寸 | number | 18 |
| onlyIconSizeSM | 小号只有图标的按钮图标尺寸 | number | 14 |
| paddingBlock | 按钮纵向内间距 | undefined | PaddingBlock<string | number> | 4 |
| paddingBlockLG | 大号按钮纵向内间距 | undefined | PaddingBlock<string | number> | 7 |
| paddingBlockSM | 小号按钮纵向内间距 | undefined | PaddingBlock<string | number> | 0 |
| paddingInline | 按钮横向内间距 | undefined | PaddingInline<string | number> | 15 |
| paddingInlineLG | 大号按钮横向内间距 | undefined | PaddingInline<string | number> | 15 |
| paddingInlineSM | 小号按钮横向内间距 | undefined | PaddingInline<string | number> | 7 |
| primaryColor | 主要按钮文本颜色 | string | #fff |
| primaryShadow | 主要按钮阴影 | string | 0 2px 0 rgba(5, 145, 255, 0.1) |
| solidTextColor | 默认实心按钮的文本色 | string | #fff |
| textHoverBg | 文本按钮悬浮态背景色 | string | rgba(0, 0, 0, 0.04) |
| textTextActiveColor | 默认文本按钮激活态文字颜色 | string | rgba(0, 0, 0, 0.88) |
| textTextColor | 默认文本按钮的文本色 | string | rgba(0, 0, 0, 0.88) |
| textTextHoverColor | 默认文本按钮悬浮态文本颜色 | string | rgba(0, 0, 0, 0.88) |
类型本质上是颜色与变体的语法糖，内部为其提供了一组颜色与变体的映射关系。如果两者同时存在，优先使用颜色与变体。
<Button type="primary">click</Button>
等同于
<Button color="primary" variant="solid">click</Button>
如果你不需要这个特性，可以设置 ConfigProvider 的 wave 的 disabled 为 true。
<ConfigProvider wave={{ disabled: true }}><Button>click</Button></ConfigProvider>
我们默认在两个汉字之间添加空格，可以通过设置 autoInsertSpace 为 false 关闭。
