esswisdom_wx/miniprogram_npm/tdesign-miniprogram/button/README.en-US.md

---

title: Button description: Buttons are used to open a closed-loop task, such as “delete” an object, “buy” an item, etc. spline: base

isComponent: true

Usage

For global import, configure it in app.json in the root directory of the miniprogram. For local import, configure it in index.json of the page or component that needs to be imported.

"usingComponents": {
  "t-button": "tdesign-miniprogram/button/button"
}

Code Demo

01 Component Type

Basic Buttons

{{ base }}

Icon Button

{{ icon-btn }}

Ghost Button

{{ ghost-btn }}

Combination Button

{{ group-btn }}

Banner Button

{{ block-btn }}

02 Component State

Buttons for different states

{{ disabled }}

03 Component Style

Different sizes of buttons

{{ size }}

Different shaped buttons

{{ shape }}

Different color theme buttons

{{ theme }}

API

Button Props

name | type | default | description | required -- | -- | -- | -- | -- t-id | String | - | button tag id | N block | Boolean | false | make button to be a block-level element | N content | String / Slot | - | button’s children elements | N custom-dataset | Object | - | Typescript：any | N disabled | Boolean | false | disable the button, make it can not be clicked | N external-classes | Array | - | ['t-class', 't-class-icon', 't-class-loading'] | N ghost | Boolean | false | make background-color to be transparent | N icon | String / Object | - | icon name | N loading | Boolean | false | set button to be loading state | N loading-props | Object | - | Typescript：LoadingProps，Loading API Documents。see more ts definition | N shape | String | rectangle | button shape。options：rectangle/square/round/circle | N size | String | medium | a button has three size。options：small/medium/large。Typescript：SizeEnum | N suffix | Slot | - | - | N theme | String | default | button theme。options：default/primary/danger | N type | String | - | type of button element, same as formType of Miniprogram。options：submit/reset | N variant | String | base | button variant。options：base/outline/text | N open-type | String | - | options：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N hover-stop-propagation | Boolean | false | - | N hover-start-time | Number | 20 | - | N hover-stay-time | Number | 70 | - | N lang | String | en | options：en/zh_CN/zh_TW | N session-from | String | - | - | N send-message-title | String | 当前标题 | - | N send-message-path | String | 当前分享路径 | - | N send-message-img | String | 截图 | - | N app-parameter | String | - | - | N show-message-card | Boolean | false | - | N bindgetuserinfo | Eventhandle | - | - | N bindcontact | Eventhandle | - | - | N bindgetphonenumber | Eventhandle | - | - | N binderror | Eventhandle | - | - | N bindopensetting | Eventhandle | - | - | N bindlaunchapp | Eventhandle | - | - | N bindchooseavatar | Eventhandle | - | - | N bindagreeprivacyauthorization | Eventhandle | - | -| N

Button Events

name | params | description -- | -- | -- tap | (e: MouseEvent) | trigger on click

Button ExternalClasses

类名 | 说明 -- | -- t-class | root t-class-icon | icon node t-class-loading | loading node

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- --td-button-border-radius | @radius-default | - --td-button-border-width | 4rpx | - --td-button-danger-active-bg-color | @error-color-7 | - --td-button-danger-active-border-color | @error-color-7 | - --td-button-danger-bg-color | @error-color | - --td-button-danger-border-color | @error-color | - --td-button-danger-color | @font-white-1 | - --td-button-danger-dashed-border-color | @button-danger-dashed-color | - --td-button-danger-dashed-color | @error-color | - --td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - --td-button-danger-disabled-bg | @error-color-3 | - --td-button-danger-disabled-border-color | @error-color-3 | - --td-button-danger-disabled-color | @font-white-1 | - --td-button-danger-outline-active-bg-color | @bg-color-container-active | - --td-button-danger-outline-active-border-color | @error-color-7 | - --td-button-danger-outline-border-color | @button-danger-outline-color | - --td-button-danger-outline-color | @error-color | - --td-button-danger-outline-disabled-color | @error-color-3 | - --td-button-danger-text-active-bg-color | @bg-color-container-active | - --td-button-danger-text-color | @error-color | - --td-button-danger-text-disabled-color | @button-danger-disabled-color | - --td-button-default-active-bg-color | @bg-color-component-active | - --td-button-default-active-border-color | @bg-color-component-active | - --td-button-default-bg-color | @bg-color-component | - --td-button-default-border-color | @bg-color-component | - --td-button-default-color | @font-gray-1 | - --td-button-default-disabled-bg | @bg-color-component-disabled | - --td-button-default-disabled-border-color | @bg-color-component-disabled | - --td-button-default-disabled-color | @font-gray-4 | - --td-button-default-outline-active-bg-color | @bg-color-container-active | - --td-button-default-outline-active-border-color | @component-border | - --td-button-default-outline-border-color | @component-border | - --td-button-default-outline-color | @font-gray-1 | - --td-button-default-outline-disabled-color | @component-border | - --td-button-default-text-active-bg-color | @bg-color-container-active | - --td-button-extra-small-font-size | @font-size-base | - --td-button-extra-small-height | 56rpx | - --td-button-extra-small-icon-font-size | 36rpx | - --td-button-extra-small-padding-horizontal | 16rpx | - --td-button-font-weight | 600 | - --td-button-ghost-border-color | @button-ghost-color | - --td-button-ghost-color | @bg-color-container | - --td-button-ghost-danger-border-color | @error-color | - --td-button-ghost-danger-color | @error-color | - --td-button-ghost-disabled-color | rgba(255, 255, 255, 0.35) | - --td-button-ghost-primary-border-color | @brand-color | - --td-button-ghost-primary-color | @brand-color | - --td-button-icon-border-radius | 8rpx | - --td-button-icon-spacer | @spacer | - --td-button-large-font-size | @font-size-m | - --td-button-large-height | 96rpx | - --td-button-large-icon-font-size | 48rpx | - --td-button-large-padding-horizontal | 40rpx | - --td-button-light-active-bg-color | @brand-color-light-active | - --td-button-light-active-border-color | @brand-color-light-active | - --td-button-light-bg-color | @brand-color-light | - --td-button-light-border-color | @brand-color-light | - --td-button-light-color | @brand-color | - --td-button-light-disabled-bg | @brand-color-light | - --td-button-light-disabled-border-color | @brand-color-light | - --td-button-light-disabled-color | @brand-color-disabled | - --td-button-light-outline-active-bg-color | @brand-color-light-active | - --td-button-light-outline-active-border-color | @brand-color-active | - --td-button-light-outline-bg-color | @brand-color-light | - --td-button-light-outline-border-color | @button-light-outline-color | - --td-button-light-outline-color | @brand-color | - --td-button-light-outline-disabled-color | @brand-color-disabled | - --td-button-light-text-active-bg-color | @bg-color-container-active | - --td-button-light-text-color | @brand-color | - --td-button-medium-font-size | @font-size-m | - --td-button-medium-height | 80rpx | - --td-button-medium-icon-font-size | 40rpx | - --td-button-medium-padding-horizontal | 32rpx | - --td-button-primary-active-bg-color | @brand-color-active | - --td-button-primary-active-border-color | @brand-color-active | - --td-button-primary-bg-color | @brand-color | - --td-button-primary-border-color | @brand-color | - --td-button-primary-color | @font-white-1 | - --td-button-primary-dashed-border-color | @button-primary-dashed-color | - --td-button-primary-dashed-color | @brand-color | - --td-button-primary-dashed-disabled-color | @brand-color-disabled | - --td-button-primary-disabled-bg | @brand-color-disabled | - --td-button-primary-disabled-border-color | @brand-color-disabled | - --td-button-primary-disabled-color | @font-white-1 | - --td-button-primary-outline-active-bg-color | @bg-color-container-active | - --td-button-primary-outline-active-border-color | @brand-color-active | - --td-button-primary-outline-border-color | @button-primary-outline-color | - --td-button-primary-outline-color | @brand-color | - --td-button-primary-outline-disabled-color | @brand-color-disabled | - --td-button-primary-text-active-bg-color | @bg-color-container-active | - --td-button-primary-text-color | @brand-color | - --td-button-primary-text-disabled-color | @brand-color-disabled | - --td-button-small-font-size | @font-size-base | - --td-button-small-height | 64rpx | - --td-button-small-icon-font-size | 36rpx | - --td-button-small-padding-horizontal | 24rpx | -