This topic describes the button component.
Attribute | Type | Default value | Description | Minimum version |
size | String | default | Possible values are default and mini. | - |
type | String | default | The style of the button, which can be primary, default, or warn. | - |
plain | Boolean | false | Whether the button is hollow. | - |
disabled | Boolean | false | Whether to disable the button. | - |
loading | Boolean | false | Whether the button text is accompanied by the loading icon. | - |
hover-class | String | button-hover | The style class to which the button is pressed. | - |
hover-start-time | Number | 20 | The number of events after which the clicked state appears, in milliseconds. | - |
hover-stay-time | Number | 70 | The retention period of the clicked state after you release the finger, in milliseconds. | - |
hover-stop-propagation | Boolean | false | Whether to prevent the ancestor element of the current element from appearing the clicked state. | |
form-type | String | - | Possible values are submit and reset. This attribute is used for components, and clicking it triggers the submit or reset event. | - |
open-type | String | - | Open capabilities | |
scope | String | - | This attribute is valid when | |
onTap | EventHandle | - | Tap. | - |
button-hover defaults to {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}.
open-type possible values
Value | Description | Minimum version |
Share | This attribute triggers custom sharing. You can determine its state by running | |
getAuthorize | Support Mini Program authorization. You can determine its state by running | |
contactShare | Share with friends in the address book. You can determine its state by running |
scope possible values
When open-type is set to getAuthorize, you can set scope to one of the following values:
Value | Description | Minimum version |
Display the authorization interface, and the user can authorize the Mini Program to obtain the user’s mobile number. |
Code sample
<view class="page">
<view class="section">
<view class="title">Type</view>
<button type="default">default</button>
<button type="primary">primary</button>
<button type="warn">warn</button>
</view>
<view class="section" style="background:#ddd;">
<view class="title">Misc</view>
<button type="default" plain>plain</button>
<button type="default" disabled>disabled</button>
<button type="default" loading={{true}}>loading</button>
<button type="default" hover-class="red">hover-red</button>
</view>
<view class="section">
<view class="title">Size</view>
<button type="default" size="mini">mini</button>
</view>
<view class="section">
<view class="title">Type</view>
<form onSubmit="onSubmit" onReset="onReset">
<button form-type="submit">submit</button>
<button form-type="reset">reset</button>
</form>
</view>
</view>