button

Button

Attribute NameTypeDefaultDescriptionMinimum Version
sizeStringdefaulteffective value default, mini
typeStringdefaultbutton style type, effective value primary, default, warn
plainBooleanfalsehollow or not
disabledBooleanfalsedisable or not
loadingBooleanfalsebutton text preceded with loading icon or not
hover-classStringbutton-hoverbutton pressed style class hover-class="none" indicates no pressed effect
hover-start-timeNumber20pressed status shown in a period after being pressed, in milliseconds
hover-stay-timeNumber70pressed status retention time after release, in milliseconds
form-typeStringeffective value submit and reset, used for component, clicking triggers submit/reset event respectively
onTapEventHandleclick
open-typeStringOpen ability
scopeStringValid when open-type is getAuthorize

The Valid Value of open-type

ValueDescription
getAuthorizeSupport for Mini Program authorization

The Valid Value of Scope

When open-type is getAuthorize , we can set scope to the following value:

ValueDescription
userInfoget user basic information

Screenshot

button

Sample Code

copy
<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>