---
name: "button"
mode: "component"
versionRequirements:
  - { name: "", version: "2.10.0" }
title: "button - Button for emphasizing actions and guiding user clicks"
---

## button

> [VERSION] v2.10.0+

### Description

Button component supporting multiple styles, sizes, and form submission.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `hover-stop-propagation` | `boolean` | No | `false` | Whether to prevent this node’s ancestor nodes from showing the hover effect |
| `size` | `string` | No | `"default"` | Button size. Options: default (default size), mini (small) |
| `type` | `string` | No | `"default"` | Button style type. Options: primary (theme color), default (white), warn (red) |
| `plain` | `boolean` | No | `false` | Whether the button is plain with a transparent background |
| `loading` | `boolean` | No | `false` | Whether to show a loading icon before the label |
| `disabled` | `boolean` | No | `false` | Whether disabled |
| `form-type` | `string` | No | `""` | For the form component. Options: submit (submit the form), reset (reset the form) |
| `hover-start-time` | `number` | No | `20` | Delay before the pressed state appears after holding, in ms |
| `hover-stay-time` | `number` | No | `70` | Time to retain the pressed state after release, in ms |

### Examples

#### Basic usage

*index.tyml*

```xml
// index.tyml
<view class="btn-wrap">
  <button type="primary">Primary button</button>
  <button type="default">Default button</button>
  <button type="warn">Warning button</button>
  <button type="primary" size="mini">Mini button</button>
  <button type="default" size="mini">Mini button</button>
</view>
```

*index.tyss*

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

*index.js*

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

#### Button states and form submission

*index.tyml*

```xml
// index.tyml
<form bind:submit="onSubmit" bind:reset="onReset">
  <button type="primary" disabled="{{disabled}}">
    Disabled button
  </button>
  <button type="primary" loading="{{loading}}" bind:tap="onToggleLoading">
    {{loading ? 'Loading...' : 'Tap to load'}}
  </button>
  <button type="primary" plain="{{true}}">Plain button</button>
  <button
    type="primary"
    form-type="submit"
    hover-start-time="{{50}}"
    hover-stay-time="{{200}}"
  >
    Submit form
  </button>
  <button type="default" form-type="reset">Reset form</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('Form submitted', e.detail.value);
  },
  onReset() {
    console.log('Form reset');
  },
});
```


### FAQ

#### How to change the button's style?

You can directly set `class` on the `button` to override styles (for miniapp v2.x and later). The default width of `button` is 100%.