---
title: Button - 按钮
order: 2
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 2
  path: /universal
  title: 通用组件
---

## 基础按钮

基础按钮包括填充按钮、描边按钮、文字按钮、和链接按钮。

**填充按钮：**

一般用于主要按钮和次要按钮，是用户在整个页面需要关注优先级最高的操作，引导用户关注并操作。

**描边按钮：**

描边按钮常见白底加文字的形式，在视觉强调程度上弱于填充按钮，通常与填充按钮搭配成组使用。

**文字按钮：**

直接使用文字作为按钮。是视觉吸引力弱于描边按钮，通常与填充按钮搭配成组实用。

**链接按钮：**

直接使用文字作为按钮。是视觉吸引力最弱的一个按钮，通常出现在表格操作栏、标题和字段旁等。

<code src="./demos/primary.tsx" height="400px"/>

## 图标按钮

图标按钮由图标+文字或图标构成。通过图标可增强识别性，以便直观理解。

<code src="./demos/icons.tsx" height="400px"/>

<!-- ### 幽灵按钮

<code src="./demos/ghost.tsx" height="400px"/> -->

## Block 按钮

Block 按钮在宽度上充满其所在的父容器（无 padding 和 margin 值）。该按钮常见于移动端和一些表单场景中。

<code src="./demos/block.tsx" height="400px"/>

## 状态按钮

按钮状态分为 错误，告警，成功 三种，可以与按钮类型同时生效，优先级高于按钮类型。

<code src="./demos/status.tsx" height="400px"/>

## 不同状态的按钮

提供加载、禁用两种状态。

<code src="./demos/disable.tsx" height="400px"/>

## 不同尺寸的按钮

提供大、中（默认）、小三种尺寸。

<code src="./demos/size.tsx" height="400px"/>

## 带有确认弹窗的按钮

按钮支持确认弹窗相关配置

<code src="./demos/baseDemo.tsx" height="400px" />

# API

通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。

按钮的属性说明如下：

| 属性          | 说明                                                                                                                                 | 类型                                                                                                   | 默认值                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | --------------------------------------- |
| block         | 将按钮宽度调整为其父宽度的选项                                                                                                       | boolean                                                                                                | false                                   |
| danger        | 设置危险按钮                                                                                                                         | boolean                                                                                                | false                                   |
| disabled      | 按钮失效状态                                                                                                                         | boolean                                                                                                | false                                   |
| ghost         | 幽灵属性，使按钮背景透明                                                                                                             | boolean                                                                                                | false                                   |
| href          | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致                                                                                | string                                                                                                 | -                                       |
| htmlType      | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string                                                                                                 | `button`                                |
| icon          | 设置按钮的图标组件                                                                                                                   | ReactNode                                                                                              | -                                       |
| loading       | 设置按钮载入状态                                                                                                                     | boolean \| { delay: number }                                                                           | false                                   |
| shape         | 设置按钮形状                                                                                                                         | `default` \| `circle` \| `round`                                                                       | 'default'                               |
| size          | 设置按钮大小                                                                                                                         | `large` \| `middle` \| `small`                                                                         | `middle`                                |
| target        | 相当于 a 链接的 target 属性，href 存在时生效                                                                                         | string                                                                                                 | -                                       |
| type          | 设置按钮类型                                                                                                                         | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default`\|`fill`\|`error`\|`alarm`\|`success` | `errorLink`\|`alarmLink`\|`successLink` | `default` |
| onClick       | 点击按钮时的回调                                                                                                                     | (event) => void                                                                                        | -                                       |
| confirmConfig | 确认按钮配置                                                                                                                         | [ModalFuncProps](<https://ant.design/components/modal-cn/#Modal.method()>)                             | -                                       |
| textColor     | 按钮文字颜色                                                                                                                         | `string`                                                                                               | -                                       |
| afterIcon     | 后置按钮                                                                                                                             | `ReactNode`                                                                                            | -                                       |

支持原生 button 的其他所有属性。