All Products
Document Center


Last Updated: Apr 19, 2021

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-class="none" indicates no clicked effect. -
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. 1.10.0
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 1.1.0
scope String - This attribute is valid when open-type is set to getAuthorize. 1.11.0
onTap EventHandle - Tap. -
app-parameter String - The parameter passed to the app when you open the app. This attribute is valid when open-type="launchApp". -
Note: 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 canIUse(''). 1.1.0
getAuthorize Support Mini Program authorization. You can determine its state by running canIUse(''). 1.11.0
contactShare Share with friends in the address book. You can determine its state by running canIUse(''). 1.11.0

scope possible values

When open-type is set to getAuthorize, you can set scope to one of the following values:

Value Description Minimum version
phoneNumber Display the authorization interface, and the user can authorize the Mini Program to obtain the user’s mobile number. 1.11.0


Code sample

  1. <view class="page">
  2. <view class="section">
  3. <view class="title">Type</view>
  4. <button type="default">default</button>
  5. <button type="primary">primary</button>
  6. <button type="warn">warn</button>
  7. </view>
  8. <view class="section" style="background:#ddd;">
  9. <view class="title">Misc</view>
  10. <button type="default" plain>plain</button>
  11. <button type="default" disabled>disabled</button>
  12. <button type="default" loading={{true}}>loading</button>
  13. <button type="default" hover-class="red">hover-red</button>
  14. </view>
  15. <view class="section">
  16. <view class="title">Size</view>
  17. <button type="default" size="mini">mini</button>
  18. </view>
  19. <view class="section">
  20. <view class="title">Type</view>
  21. <form onSubmit="onSubmit" onReset="onReset">
  22. <button form-type="submit">submit</button>
  23. <button form-type="reset">reset</button>
  24. </form>
  25. </view>
  26. </view>