---
name: "button"
mode: "component"
versionRequirements:
  - { name: "", version: "2.10.0" }
title: "button - 按钮，用于强调操作并引导用户去点击"
---

## button

> [VERSION] v2.10.0+

### 描述

按钮组件，支持多种样式类型、尺寸和表单提交等功能。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `hover-stop-propagation` | `boolean` | 否 | `false` | 是否阻止本节点的祖先节点出现点击态 |
| `size` | `string` | 否 | `"default"` | 按钮的大小，可选值：default 默认大小，mini 小尺寸 |
| `type` | `string` | 否 | `"default"` | 按钮的样式类型，可选值：primary 主题色，default 白色，warn 红色 |
| `plain` | `boolean` | 否 | `false` | 按钮是否镂空，背景色透明 |
| `loading` | `boolean` | 否 | `false` | 名称前是否带 loading 图标 |
| `disabled` | `boolean` | 否 | `false` | 是否禁用 |
| `form-type` | `string` | 否 | `""` | 用于 form 组件，可选值：submit 提交表单，reset 重置表单 |
| `hover-start-time` | `number` | 否 | `20` | 按住后多久出现点击态，单位毫秒 |
| `hover-stay-time` | `number` | 否 | `70` | 手指松开后点击态保留时间，单位毫秒 |

### 示例代码

#### 基础用法

*index.tyml*

```xml
<view class="btn-wrap">
  <button type="primary">主要按钮</button>
  <button type="default">默认按钮</button>
  <button type="warn">警告按钮</button>
  <button type="primary" size="mini">小按钮</button>
  <button type="default" size="mini">小按钮</button>
</view>
```

*index.tyss*

```css
.btn-wrap {
  padding: 20rpx;
}
.btn-wrap button {
  margin-bottom: 20rpx;
}
```

*index.js*

```javascript
Page({
  data: {},
});
```

#### 按钮状态与表单提交

*index.tyml*

```xml
<form bind:submit="onSubmit" bind:reset="onReset">
  <button type="primary" disabled="{{disabled}}">
    禁用按钮
  </button>
  <button type="primary" loading="{{loading}}" bind:tap="onToggleLoading">
    {{loading ? '加载中...' : '点击加载'}}
  </button>
  <button type="primary" plain="{{true}}">镂空按钮</button>
  <button
    type="primary"
    form-type="submit"
    hover-start-time="{{50}}"
    hover-stay-time="{{200}}"
  >
    提交表单
  </button>
  <button type="default" form-type="reset">重置表单</button>
</form>
```

*index.tyss*

```css
form {
  padding: 20rpx;
}
form button {
  margin-bottom: 20rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    disabled: true,
    loading: false,
  },
  onToggleLoading() {
    this.setData({ loading: !this.data.loading });
  },
  onSubmit(e) {
    console.log('表单提交', e.detail.value);
  },
  onReset() {
    console.log('表单重置');
  },
});
```


### 常见问题

#### button 如何修改样式？

可直接给`button`设置`class`,直接进行样式覆盖。(2.X 小程序版本)。 `button` 默认宽度为 100%。