按钮 Button - Ant Design

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

在 Ant Design 中我们提供了五种按钮。

🔵 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
⚪️ 默认按钮：用于没有主次之分的一组行动点。
🫥 虚线按钮：常用于添加操作。
🔤 文本按钮：用于最次级的行动点。
🔗 链接按钮：一般用于链接，即导航至某位置。

以及四种状态属性与上面配合使用。

⚠️ 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
👻 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
🚫 禁用：行动点不可用的时候，一般需要文案解释。
🔃 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

代码演示

API

通用属性参考：通用属性

通过设置 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` \| PresetColors	-	`default`、`primary` 和 `danger`: 5.21.0, `PresetColors`: 5.23.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, icon: ReactNode }	false	icon: 5.23.0
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 的其他所有属性。

PresetColors

type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';

Semantic DOM

主题变量（Design Token）

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	只有图标的按钮图标尺寸	string \| number	inherit
onlyIconSizeLG	大号只有图标的按钮图标尺寸	string \| number	inherit
onlyIconSizeSM	小号只有图标的按钮图标尺寸	string \| number	inherit
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)

FAQ

类型和颜色与变体如何选择？

类型本质上是颜色与变体的语法糖，内部为其提供了一组颜色与变体的映射关系。如果两者同时存在，优先使用颜色与变体。

jsx

<Button type="primary">click</Button>

等同于

jsx

<Button color="primary" variant="solid">
  click
</Button>

如何关闭点击波纹效果？

如果你不需要这个特性，可以设置 ConfigProvider 的 wave 的 disabled 为 true。

jsx

<ConfigProvider wave={{ disabled: true }}>
  <Button>click</Button>
</ConfigProvider>

设计指引

我的按钮究竟该放哪儿！？| Ant Design 4.0 系列分享

Button按钮