---
nav:
  path: /components
group:
  title: 通用
  order: 2
toc: 'content'
---

# Button 按钮

<code src="../../docs/components/compatibility.tsx" inline="true"></code>

用于开始一个即时操作。

## 何时使用

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

## 代码示例

### 基本使用

<code src='pages/Button/index'></code>

### Inline

<code src='pages/ButtonInline/index'></code>

### Icon

<code src='pages/ButtonIcon/index'></code>

### 更多自定义

<code src='pages/ButtonCustom/index'></code>

## API

### Button

以下表格介绍了 Button 组件的 API 属性：

| 属性            | 说明                                                            | 类型                                                                          | 默认值    |
| --------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------- | --------- |
| type            | 按钮类型，可选 `primary`、`default`、`text`                     | string                                                                        | `default` |
| danger          | 是否为危险按钮                                                  | boolean                                                                       | false     |
| disabled        | 是否为失效按钮                                                  | boolean                                                                       | false     |
| activeClassName | 按下时的类名                                                    | string                                                                        | -         |
| className       | 类名                                                            | string                                                                        | -         |
| style           | 样式                                                            | string                                                                        | -         |
| inline          | 是否为内联按钮                                                  | boolean                                                                       | false     |
| icon            | 按钮左侧图标                                                    | string                                                                        | -         |
| loading         | 是否加载中，加载中时不可点击                                    | boolean                                                                       | -         |
| size            | 按钮大小。仅在 `inline` 下生效，可选 `small`、`medium`、`large` | string                                                                        | `medium`  |
| subText         | 辅助文字，显示在第二行。`inline` 下不生效                       | string                                                                        | -         |
| catchTap        | 点击按钮，触发此回调，非冒泡                                    | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | -         |
| onTap           | 点击按钮，触发此回调                                            | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | -         |
| onDisabledTap   | 禁用时点击出发回调（微信不支持）                                              | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | -         |

### 更多属性

以下是 Button 组件支持的其他属性：

- `public-id`
- `open-type`
- `scope`
- `form-type`
- `onGetAuthorize`
- `onFollowLifestyle`
- `onError`
- `onGetUserInfo`
- `onGetPhoneNumber`

具体的属性说明，请参考支付宝小程序的官方文档。

[Button 组件属性说明](https://opendocs.alipay.com/mini/component/button#%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E)
