Skip to main content
Version: Next

Button

Button.

Reference

Type

ComponentType<ButtonProps>

Examples

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>
)
}
}

ButtonProps

PropertyTypeDefaultRequiredDescription
size"default" | "mini"defaultNoThe size of the button.
type"default" | "primary" | "warn"defaultNoThe style class of the button.
plainbooleanfalseNoSpecifies whether the button is hollow with transparent background.
disabledbooleanfalseNoSpecifies whether to disable the component.
loadingbooleanfalseNoSpecifies whether a loading icon exists before the name.
formType"submit" | "reset"NoUsed 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"NoOpen capability of WeChat
hoverClassstringbutton-hoverNoThe style class the button that is tapped. When hover-class="none", the tap state is not displayed.
hoverStylestringnoneNoSince 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.
hoverStopPropagationbooleanfalseNoSpecifies whether to block the tapped state from the ancestor node of this node.
hoverStartTimenumber20NoSpecifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds.
hoverStayTimenumber70NoSpecifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds.
lang"en" | "zh_CN" | "zh_TW"NoSpecifies the language of the returned user information. zh_CN: Simplified Chinese; zh_TW: Traditional Chinese; en: English.

Pre-requisites: open-type="getUserInfo"
sessionFromstringNoThe source of the chat. It is valid when open-type="contact"
sendMessageTitlestringCurrent titleNoThe title of the message card in the chat. It is valid when open-type="contact"
sendMessagePathstringCurrent titleNoThe path of the Mini Program to which the message card in the chat is tapped to navigate. It is valid when open-type="contact"
sendMessageImgstringScreenshotNoThe image of the message card in the chat. It is valid when open-type="contact"
appParameterstringNoThe parameter passed to the app when it is launched. It is valid when open-type="launchApp"
scope"userInfo" | "phoneNumber"NoAlipay Mini-Program scope. It is valid when open-type="getAuthorize"
showMessageCardbooleanfalseNoSpecifies whether to display message cards in a chat. It is valid when open-type="contact"
onGetUserInfoBaseEventOrigFunction<onGetUserInfoEventDetail>NoWhen 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"
onGetAuthorizeBaseEventOrigFunction<any>NoCallback used to get the authorization of Alipay member information.

It is valid when open-type="getAuthorize"
onContactBaseEventOrigFunction<onContactEventDetail>NoCallback used to obtain customer messages. It is valid when open-type="contact".
onGetPhoneNumberBaseEventOrigFunction<onGetPhoneNumberEventDetail>NoCallback used to obtain the user's mobile number.

It is valid when open-type="getphonenumber"
onGetRealnameAuthInfoBaseEventOrigFunction<any>NoCallback used to obtain the user's real name.

It is valid when open-type="getRealnameAuthInfo"
onErrorBaseEventOrigFunction<any>NoCallback used when an error occurred while using open capability.

It is valid when open-type="launchApp"
onOpenSettingBaseEventOrigFunction<onOpenSettingEventDetail>NoCallback used after the authorization setting page is opened.

It is valid when open-type="openSetting"
onLaunchappBaseEventOrigFunction<any>NoCallback used after the app is launched.

It is valid when open-type="launchApp"

API Support

APIWeChat Mini-ProgramAlipay Mini-ProgramH5React 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

ValueDescription
defaultDefault size
miniMinimum size

type

Valid values of type

ValueDescription
primaryGreen
defaultWhite
warnRed

formType

Valid values of form-type

ValueDescription
submitSubmits the form
resetResets the form

openType

Valid values of open-type

ValueDescription
contactOpens 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
shareTriggers 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
getUserInfoGets user information. The user information can be obtained from the bindgetuserinfo callback.
lifestyle
launchAppOpens the app. The parameters passed to the app can be set via the app-parameter property. See details
openSettingOpens the authorization setting page.
feedbackOpens 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

ValueDescription
enEnglish
zh_CNSimplified Chinese
zh_TWTraditional Chinese

gender

Valid values of gender

ValueDescription
0Unknown
1Male
2Female

onGetUserInfoEventDetail

ParamTypeDescription
userInfo{ nickName: string; avatarUrl: string; gender: 0 | 1 | 2; province: string; city: string; country: string; }
rawDatastringRaw data JSON strings that do not include sensitive information and are used to calculate the signature.
signaturestringUse sha1(rawData + sessionkey) to get the string for verifying user information
encryptedDatastringEncrypted data with complete user information, including sensitive data.
ivstringThe initial vector of the encryption algorithm
errMsgstring

onContactEventDetail

ParamTypeDescription
errMsgstring
pathstringThe path specified by the mini-program's message.
queryRecord<string, any>The query parameters specified by the mini-program's message.

onGetPhoneNumberEventDetail

ParamTypeDescription
errMsgstring
encryptedDatastringEncrypted data with complete user information including sensitive data.
ivstringThe initial vector of the encryption algorithm.

onOpenSettingEventDetail

ParamType
errMsgstring
authSettingRecord<string, boolean>

API Support

APIWeChat Mini-ProgramH5React Native
Button✔️✔️✔️