文档贡献者
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
在 Ant Design 中我们提供了五种按钮。
以及四种状态属性与上面配合使用。
通用属性参考：通用属性
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。
按钮的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 autoInsertSpace 为 false 关闭 | boolean | true | 5.17.0 | 5.17.0 |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | ||
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| color | 设置按钮的颜色 | default | primary | danger | PresetColors | variant="solid" 时为 primary | default、primary 和 danger: 5.21.0, PresetColors: 5.23.0, solid 默认颜色: 6.4.0 | 5.25.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 | - | ||
| iconPlacement | 设置按钮图标组件的位置 | start | end | start | - | |
设置按钮图标组件的位置,请使用 iconPlacement 替换 | start | end | start | 5.17.0 | ||
| loading | 设置按钮载入状态 | boolean | { delay: number, icon: ReactNode } | false | icon: 5.23.0 | |
| loadingIcon | （仅支持全局配置）设置按钮的加载图标 | ReactNode | <LoadingOutlined /> | 6.3.0 | |
| onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | ||
| shape | 设置按钮形状 | default | circle | round | default | 5.27.0 | |
| size | 设置按钮大小 | large | medium | small | medium | ||
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 6.0.0 | |
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | ||
| type | 语法糖，设置按钮类型。当设置 variant 与 color 时以后者为准 | primary | dashed | link | text | default | default | ||
| variant | 设置按钮的变体 | outlined | dashed | solid | filled | text | link | - | 5.21.0 | 5.25.0 |
支持原生 button 的其他所有属性。
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| contentFontSize | 按钮内容字体大小 | number | 14 |
| contentFontSizeLG | 大号按钮内容字体大小 | number | 16 |
| contentFontSizeSM | 小号按钮内容字体大小 | number | 14 |
| dangerColor | 危险按钮文本颜色 | string | #fff |
| dangerShadow | 危险按钮阴影 | string | 0 2px 0 rgba(255,38,5,0.06) |
| dashedBgDisabled | type='dashed' 禁用状态下的背景颜色 | string | rgba(0,0,0,0.04) |
| defaultActiveBg | 默认按钮激活态背景色 | string | #ffffff |
| defaultActiveBorderColor | 默认按钮激活态边框颜色 | string | #0958d9 |
| defaultActiveColor | 默认按钮激活态文字颜色 | string | #0958d9 |
| defaultBg | 默认按钮背景色 | string | #ffffff |
| defaultBgDisabled | type='default' 禁用状态下的背景颜色 | string | rgba(0,0,0,0.04) |
| 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 | 文字字重 | FontWeight | undefined | 400 |
| ghostBg | 幽灵按钮背景色 | string | transparent |
| iconGap | 图标文字间距 | Gap<string | number> | undefined | 8 |
| linkHoverBg | 链接按钮悬浮态背景色 | string | transparent |
| onlyIconSize | 只有图标的按钮图标尺寸 | string | number | inherit |
| onlyIconSizeLG | 大号只有图标的按钮图标尺寸 | string | number | inherit |
| onlyIconSizeSM | 小号只有图标的按钮图标尺寸 | string | number | inherit |
| paddingInline | 按钮横向内间距 | PaddingInline<string | number> | undefined | 15 |
| paddingInlineLG | 大号按钮横向内间距 | PaddingInline<string | number> | undefined | 15 |
| paddingInlineSM | 小号按钮横向内间距 | PaddingInline<string | number> | undefined | 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) |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgContainer | 组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。 | string | #ffffff |
| colorBgContainerDisabled | 控制容器在禁用状态下的背景色。 | string | rgba(0,0,0,0.04) |
| colorBgSolid | 实心的背景颜色，目前只用在默认实心按钮背景色上。 | string | rgb(0,0,0) |
| colorBgSolidActive | 实心的背景颜色激活态，目前只用在默认实心按钮的 active 效果。 | string | rgba(0,0,0,0.95) |
| colorBgSolidHover | 实心的背景颜色悬浮态，目前只用在默认实心按钮的 hover 效果。 | string | rgba(0,0,0,0.75) |
| colorError | 用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。 | string | #ff4d4f |
| colorErrorActive | 错误色的深色激活态 | string | #d9363e |
| colorErrorBg | 错误色的浅色背景颜色 | string | #fff2f0 |
| colorErrorBgActive | 错误色的浅色背景色激活态 | string | #ffccc7 |
| colorErrorBgFilledHover | 错误色的浅色填充背景色悬浮态，目前只用在危险填充按钮的 hover 效果。 | string | #ffdfdc |
| colorErrorHover | 错误色的深色悬浮态 | string | #ff7875 |
| colorFill | 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。 | string | rgba(0,0,0,0.15) |
| colorFillSecondary | 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。 | string | rgba(0,0,0,0.06) |
| colorFillTertiary | 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。 | string | rgba(0,0,0,0.04) |
| colorLink | 控制超链接的颜色。 | string | #1677ff |
| colorLinkActive | 控制超链接被点击时的颜色。 | string | #0958d9 |
| colorLinkHover | 控制超链接悬浮时的颜色。 | string | #69b1ff |
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorPrimaryActive | 主色梯度下的深色激活态。 | string | #0958d9 |
| colorPrimaryBg | 主色浅色背景颜色，一般用于视觉层级较弱的选中状态。 | string | #e6f4ff |
| colorPrimaryBgHover | 与主色浅色背景颜色相对应的悬浮态颜色。 | string | #bae0ff |
| colorPrimaryBorder | 主色梯度下的描边用色，用在 Slider 等组件的描边上。 | string | #91caff |
| colorPrimaryHover | 主色梯度下的悬浮态。 | string | #4096ff |
| colorTextDisabled | 控制禁用状态下的字体颜色。 | string | rgba(0,0,0,0.25) |
| colorTextLightSolid | 控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。 | string | #fff |
| borderRadius | 基础组件的圆角大小，例如按钮、输入框、卡片等 | number | 6 |
| borderRadiusLG | LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。 | number | 8 |
| borderRadiusSM | SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角 | number | 4 |
| controlHeight | Ant Design 中按钮和输入框等基础控件的高度 | number | 32 |
| controlHeightLG | 较高的组件高度 | number | 40 |
| controlHeightSM | 较小的组件高度 | number | 24 |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| lineWidth | 用于控制组件边框、分割线等的宽度 | number | 1 |
| lineWidthFocus | 控制线条的宽度，当组件处于聚焦态时。 | number | 3 |
| motionDurationMid | 动效播放速度，中速。用于中型元素动画交互 | string | 0.2s |
| motionDurationSlow | 动效播放速度，慢速。用于大型元素如面板动画交互 | string | 0.3s |
| motionEaseInOut | 预设动效曲率 | string | |
| opacityLoading | 控制加载状态的透明度。 | number | 0.65 |
| paddingXS | 控制元素的特小内间距。 | number | 8 |
类型本质上是颜色与变体的语法糖，内部为其提供了一组颜色与变体的映射关系。如果两者同时存在，优先使用颜色与变体。
<Button type="primary">click</Button>
等同于
<Button color="primary" variant="solid">click</Button>
如果你不需要这个特性，可以设置 ConfigProvider 的 wave 的 disabled 为 true。
<ConfigProvider wave={{ disabled: true }}><Button>click</Button></ConfigProvider>