title, description, spline, isComponent
| title | description | spline | isComponent |
|---|---|---|---|
| Button | Buttons are used to open a closed-loop task, such as "delete" an object, "buy" an item, etc. | base | 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 |
|---|---|---|---|---|
| style | Object | - | CSS(Cascading Style Sheets) | N |
| custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N |
| app-parameter | String | - | - | N |
| block | Boolean | false | make button to be a block-level element | N |
| content | String / Slot | - | button's children elements。see more ts definition | N |
| custom-dataset | any | - | - | N |
| disabled | Boolean | undefined | disable the button, make it can not be clicked | N |
| ghost | Boolean | false | make background-color to be transparent | N |
| hover-class | String | - | - | N |
| hover-start-time | Number | 20 | - | N |
| hover-stay-time | Number | 70 | - | N |
| hover-stop-propagation | Boolean | false | - | N |
| icon | String / Object | - | icon name | N |
| lang | String | - | message language。options: en/zh_CN/zh_TW | N |
| loading | Boolean | false | set button to be loading state | N |
| loading-props | Object | - | Typescript：LoadingProps，Loading API Documents。see more ts definition |
N |
| open-type | String | - | open type of button, Miniprogram Button。options: contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N |
| phone-number-no-quota-toast | Boolean | true | - | N |
| send-message-img | String | 截图 | - | N |
| send-message-path | String | 当前分享路径 | - | N |
| send-message-title | String | 当前标题 | - | N |
| session-from | String | - | - | N |
| shape | String | rectangle | button shape。options: rectangle/square/round/circle | N |
| show-message-card | Boolean | false | - | N |
| size | String | medium | a button has four size。options: extra-small/small/medium/large | N |
| suffix | Slot | - | see more ts definition | N |
| t-id | String | - | id | N |
| theme | String | default | button theme。options: default/primary/danger/light | N |
| type | String | - | type of button element, same as formType of Miniprogram。options: submit/reset | N |
| variant | String | base | variant of button。options: base/outline/dashed/text | N |
Button Events
| name | params | description |
|---|---|---|
| agreeprivacyauthorization | - | - |
| chooseavatar | - | - |
| contact | - | - |
| createliveactivity | - | - |
| error | - | - |
| getphonenumber | - | - |
| getrealtimephonenumber | - | - |
| getuserinfo | - | - |
| launchapp | - | - |
| opensetting | - | - |
| tap | event |
- |
Button External Classes
| className | Description |
|---|---|
| t-class | - |
| t-class-icon | class name of icon |
| t-class-loading | class name of loading |
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-active | - |
| --td-button-danger-active-border-color | @error-color-active | - |
| --td-button-danger-bg-color | @error-color | - |
| --td-button-danger-border-color | @error-color | - |
| --td-button-danger-color | @text-color-anti | - |
| --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-active | - |
| --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 | @text-color-primary | - |
| --td-button-default-disabled-bg | @bg-color-component-disabled | - |
| --td-button-default-disabled-border-color | @bg-color-component-disabled | - |
| --td-button-default-disabled-color | @text-color-disabled | - |
| --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 | @text-color-primary | - |
| --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 | @text-color-anti | - |
| --td-button-ghost-danger-border-color | @error-color | - |
| --td-button-ghost-danger-color | @error-color | - |
| --td-button-ghost-danger-hover-color | @error-color-active | - |
| --td-button-ghost-disabled-color | @font-white-4 | - |
| --td-button-ghost-hover-color | @font-white-2 | - |
| --td-button-ghost-primary-border-color | @brand-color | - |
| --td-button-ghost-primary-color | @brand-color | - |
| --td-button-ghost-primary-hover-color | @brand-color-active | - |
| --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 | @text-color-anti | - |
| --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 | @text-color-anti | - |
| --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 | - |