- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
按钮用于开始一个即时操作。
标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。
在 Ant Design 中我们提供了五种按钮。
以及四种状态属性与上面配合使用。
通用属性参考:通用属性
通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:type
-> shape
-> size
-> loading
-> disabled
。
按钮的属性说明如下:
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
classNames | 语义化结构 class | Record<SemanticDOM, string> | - | 5.4.0 |
danger | 设置危险按钮 | boolean | false | |
disabled | 设置按钮失效状态 | boolean | false | |
ghost | 幽灵属性,使按钮背景透明 | boolean | false | |
href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - | |
htmlType | 设置 button 原生的 type 值,可选值请参考 HTML 标准 | string | button | |
icon | 设置按钮的图标组件 | ReactNode | - | |
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 | 设置按钮类型 | primary | dashed | link | text | default | default | |
onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - |
支持原生 button 的其他所有属性。
styles
和 classNames
属性名称 | 说明 | 版本 |
---|---|---|
icon | 设置图标元素 | 5.5.0 |
Token 名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
borderColorDisabled | 禁用状态边框颜色 | string | #d9d9d9 |
contentFontSize | 按钮内容字体大小 | number | 14 |
contentFontSizeLG | 大号按钮内容字体大小 | number | 16 |
contentFontSizeSM | 小号按钮内容字体大小 | number | 14 |
dangerColor | 危险按钮文本颜色 | string | #fff |
dangerShadow | 危险按钮阴影 | string | 0 2px 0 rgba(255, 38, 5, 0.06) |
defaultBg | 默认按钮背景色 | string | #ffffff |
defaultBorderColor | 默认按钮边框颜色 | string | #d9d9d9 |
defaultColor | 默认按钮文本颜色 | string | rgba(0, 0, 0, 0.88) |
defaultGhostBorderColor | 默认幽灵按钮边框颜色 | string | #ffffff |
defaultGhostColor | 默认幽灵按钮文本颜色 | string | #ffffff |
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 | PaddingInline<string | number> | 4 |
paddingBlockLG | 大号按钮横向内间距 | undefined | PaddingInline<string | number> | 6.428571428571429 |
paddingBlockSM | 小号按钮横向内间距 | undefined | PaddingInline<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) |
textHoverBg | 文本按钮悬浮态背景色 | string | rgba(0, 0, 0, 0.06) |
根据 Ant Design 设计规范要求,我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 ConfigProvider 的 autoInsertSpaceInButton
为 false
。
<ConfigProvider autoInsertSpaceInButton={false}><Button>按钮</Button></ConfigProvider>