Button

Button.

Reference

Type

ComponentType<ButtonProps>

Examples

React

export default class PageButton extends Component {
  state = {
    btn: [
      {
        text: 'Primary Normal',
        size: 'default',
        type: 'primary'
      },
      {
        text: 'Primary Loading',
        size: 'default',
        type: 'primary',
        loading: true,
      },
      {
        text: 'Primary Disabled',
        size: 'default',
        type: 'primary',
        disabled: true,
      },
      {
        text: 'Secondary Normal',
        size: 'default',
        type: 'default'
      },
      {
        text: 'Secondary Disabled',
        size: 'default',
        type: 'default',
        disabled: true,
      },
      {
        text: 'Wran Normal',
        size: 'default',
        type: 'warn'
      },
      {
        text: 'Wran Disabled',
        size: 'default',
        type: 'warn',
        disabled: true,
      }
    ]
  }
  render () {
    return (
      <View className='container'>
        {this.state.btn.map(item => {
          return (
            <Button
              size={item.size ? item.size : ''}
              type={item.type ? item.type : ''}
              loading={item.loading ? item.loading : false}
              disabled={item.disabled ? item.disabled : false}
            >
              {item.text}
            </Button>
          )
        })}
        <Button className='btn-max-w' plain type='primary'>button</Button>
        <Button className='btn-max-w' plain type='primary' disabled>disabled button</Button>
        <Button className='btn-max-w' plain >button</Button>
        <Button className='btn-max-w' plain disabled >button</Button>
        <Button size='mini' type='primary'>button</Button>
        <Button size='mini' >button</Button>
        <Button size='mini' type='warn'>button</Button>
      </View>
    )
  }
}

Vue

<template>
  <view class="container">
    <button
      v-for="item in btn"
      :size="item.size ? item.size : ''"
      :type="item.type ? item.type : ''"
      :loading="item.loading ? item.loading : false"
      :disabled="item.disabled ? item.disabled : false"
    >
      {{ item.text }}
    </button>
    <button class="btn-max-w" :plain="true" type="primary">button</button>
    <button class="btn-max-w" :plain="true" type="primary" :disabled="true">disabled button</button>
    <button class="btn-max-w" :plain="true">button</button>
    <button class="btn-max-w" :plain="true" :disabled="true">button</button>
    <button size="mini" type="primary">button</button>
    <button size="mini" >button</button>
    <button size="mini" type="warn">button</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btn: [
        {
          text: 'Primary Normal',
          size: 'default',
          type: 'primary'
        },
        {
          text: 'Primary Loading',
          size: 'default',
          type: 'primary',
          loading: true,
        },
        {
          text: 'Primary Disabled',
          size: 'default',
          type: 'primary',
          disabled: true,
        },
        {
          text: 'Secondary Normal',
          size: 'default',
          type: 'default'
        },
        {
          text: 'Secondary Disabled',
          size: 'default',
          type: 'default',
          disabled: true,
        },
        {
          text: 'Secondary Normal',
          size: 'default',
          type: 'warn'
        },
        {
          text: 'Secondary Disabled',
          size: 'default',
          type: 'warn',
          disabled: true,
        }
      ]
    }
  }
}
</script>

ButtonProps

Property	Type	Default	Required	Description
size	"default" | "mini"	default	No	The size of the button.
type	"default" | "primary" | "warn"	default	No	The style class of the button.
plain	boolean	false	No	Specifies whether the button is hollow with transparent background.
disabled	boolean	false	No	Specifies whether to disable the component.
loading	boolean	false	No	Specifies whether a loading icon exists before the name.
formType	"submit" | "reset"		No	Used in the <form/> component. When it is tapped, the submit and reset events of the <form/> component are separately triggered.
openType	"contact" | "contactShare" | "share" | "getRealnameAuthInfo" | "getAuthorize" | "getPhoneNumber" | "getUserInfo" | "lifestyle" | "launchApp" | "openSetting" | "feedback"		No	Open capability of WeChat
hoverClass	string	button-hover	No	The style class the button that is tapped. When hover-class="none", the tap state is not displayed.
hoverStyle	string	none	No	Since RN does not support Class, the Button component on the RN side implements the hoverStyle property, which is written similarly to style, except that the style of hoverStyle specifies the style to be pressed.
hoverStopPropagation	boolean	false	No	Specifies whether to block the tapped state from the ancestor node of this node.
hoverStartTime	number	20	No	Specifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds.
hoverStayTime	number	70	No	Specifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds.
lang	"en" | "zh_CN" | "zh_TW"		No	Specifies the language of the returned user information. zh_CN: Simplified Chinese; zh_TW: Traditional Chinese; en: English. Pre-requisites: open-type="getUserInfo"
sessionFrom	string		No	The source of the chat. It is valid when open-type="contact"
sendMessageTitle	string	Current title	No	The title of the message card in the chat. It is valid when open-type="contact"
sendMessagePath	string	Current title	No	The path of the Mini Program to which the message card in the chat is tapped to navigate. It is valid when open-type="contact"
sendMessageImg	string	Screenshot	No	The image of the message card in the chat. It is valid when open-type="contact"
appParameter	string		No	The parameter passed to the app when it is launched. It is valid when open-type="launchApp"
scope	"userInfo" | "phoneNumber"		No	Alipay Mini-Program scope. It is valid when open-type="getAuthorize"
showMessageCard	boolean	false	No	Specifies whether to display message cards in a chat. It is valid when open-type="contact"
onGetUserInfo	BaseEventOrigFunction<onGetUserInfoEventDetail>		No	When a user taps this button, the user information obtained is returned. The detail data that is obtained via callback is consistent with that returned by Taro.getUserInfo. It is valid when open-type="getUserInfo"
onGetAuthorize	BaseEventOrigFunction<any>		No	Callback used to get the authorization of Alipay member information. It is valid when open-type="getAuthorize"
onContact	BaseEventOrigFunction<onContactEventDetail>		No	Callback used to obtain customer messages. It is valid when open-type="contact".
onGetPhoneNumber	BaseEventOrigFunction<onGetPhoneNumberEventDetail>		No	Callback used to obtain the user's mobile number. It is valid when open-type="getphonenumber"
onGetRealnameAuthInfo	BaseEventOrigFunction<any>		No	Callback used to obtain the user's real name. It is valid when open-type="getRealnameAuthInfo"
onError	BaseEventOrigFunction<any>		No	Callback used when an error occurred while using open capability. It is valid when open-type="launchApp"
onOpenSetting	BaseEventOrigFunction<onOpenSettingEventDetail>		No	Callback used after the authorization setting page is opened. It is valid when open-type="openSetting"
onLaunchapp	BaseEventOrigFunction<any>		No	Callback used after the app is launched. It is valid when open-type="launchApp"

API Support

API	WeChat Mini-Program	Alipay Mini-Program	H5	React Native
ButtonProps.size	✔️		✔️	✔️
ButtonProps.type	✔️		✔️	✔️
ButtonProps.plain	✔️		✔️	✔️
ButtonProps.disabled	✔️		✔️	✔️
ButtonProps.loading	✔️		✔️	✔️
ButtonProps.formType	✔️
ButtonProps.openType	✔️
ButtonProps.hoverClass	✔️		✔️
ButtonProps.hoverStyle				✔️
ButtonProps.hoverStopPropagation	✔️
ButtonProps.hoverStartTime	✔️		✔️	✔️
ButtonProps.hoverStayTime	✔️		✔️	✔️
ButtonProps.lang	✔️
ButtonProps.sessionFrom	✔️
ButtonProps.sendMessageTitle	✔️
ButtonProps.sendMessagePath	✔️
ButtonProps.sendMessageImg	✔️
ButtonProps.appParameter	✔️
ButtonProps.scope	✔️
ButtonProps.onGetUserInfo	✔️
ButtonProps.onGetAuthorize		✔️
ButtonProps.onContact	✔️
ButtonProps.onGetPhoneNumber	✔️
ButtonProps.onGetRealnameAuthInfo	✔️
ButtonProps.onError	✔️
ButtonProps.onOpenSetting	✔️
ButtonProps.onLaunchapp	✔️

size

Valid values of size

Value	Description
default	Default size
mini	Minimum size

type

Valid values of type

Value	Description
primary	Green
default	White
warn	Red

formType

Valid values of form-type

Value	Description
submit	Submits the form
reset	Resets the form

openType

Valid values of open-type

Value	Description
contact	Opens a customer service chat. If the user taps the message card in the chat to return to a Mini Program, the specific information can be obtained from the bindcontact callback. See details.
contactShare
share	Triggers forwarding. Before use, read User Guide.
getRealnameAuthInfo
getAuthorize
getPhoneNumber	Gets the user's mobile number. The user information can be obtained from the bindgetphonenumber callback. Vue3 example: <button @getphonenumber="callback" /> See details
getUserInfo	Gets user information. The user information can be obtained from the bindgetuserinfo callback.
lifestyle
launchApp	Opens the app. The parameters passed to the app can be set via the app-parameter property. See details
openSetting	Opens the authorization setting page.
feedback	Opens the Feedback page, where users can submit feedback and upload logs. Developers can log in to the Mini Program admin console and open the Customer Service Feedback page from the left-side menu to get the feedback.

lang

Valid values of lang

Value	Description
en	English
zh_CN	Simplified Chinese
zh_TW	Traditional Chinese

gender

Valid values of gender

Value	Description
0	Unknown
1	Male
2	Female

onGetUserInfoEventDetail

Param	Type	Description
userInfo	{ nickName: string; avatarUrl: string; gender: 0 | 1 | 2; province: string; city: string; country: string; }
rawData	string	Raw data JSON strings that do not include sensitive information and are used to calculate the signature.
signature	string	Use sha1(rawData + sessionkey) to get the string for verifying user information
encryptedData	string	Encrypted data with complete user information, including sensitive data.
iv	string	The initial vector of the encryption algorithm
errMsg	string

onContactEventDetail

Param	Type	Description
errMsg	string
path	string	The path specified by the mini-program's message.
query	Record<string, any>	The query parameters specified by the mini-program's message.

onGetPhoneNumberEventDetail

Param	Type	Description
errMsg	string
encryptedData	string	Encrypted data with complete user information including sensitive data.
iv	string	The initial vector of the encryption algorithm.

onOpenSettingEventDetail

Param	Type
errMsg	string
authSetting	Record<string, boolean>

API Support

API	WeChat Mini-Program	H5	React Native
Button	✔️	✔️	✔️