All Products
Search
Document Center

button

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('button.open-type.share'). 1.1.0
getAuthorize Support Mini Program authorization. You can determine its state by running canIUse('button.open-type.getAuthorize'). 1.11.0
contactShare Share with friends in the address book. You can determine its state by running canIUse('button.open-type.contactShare'). 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

Illustration

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>