Button
WdButton
Applicable Scenarios
Used for scenarios that require user clicks to trigger specific events, such as form submission, page navigation, etc.
Basic Capabilities Description
- Basic properties of buttons support configuration of title, color, type, size, and full-width display, allowing flexible selection and combination.
- Advanced properties of buttons support configuration of loading state, icon buttons, and usage scenarios in forms. The mini-program side also supports configuring corresponding WeChat Open Capabilities for buttons.
Extended Scenarios Description
Button Use Cases in Forms
Example
Submit: After entering information in the form, click the button to submit the form data to the data model.
Reset: After entering information in the form, click the button to clear the input content in the form.
Configuration Method
Submit: In the button properties area-advanced properties-form type-submit, after adding a form container-selecting a data model, the form and its submit button will be automatically generated. The auto-generated button in the form container has its form type defaulted to submit.
Reset: In the Button Properties Area - Advanced Properties - Form Type - Reset, you can add a button to the form. Change the button title to "Reset" and set its form type to "Reset". After entering content in the form, clicking the reset button will clear all entered/selected content. (In the reset button basic properties - color, you can choose Secondary; use the margin in the style panel to flexibly adjust the spacing between buttons.)

Button Use Cases in Mini Programs
Example
Example
Interactive Preview
Different Types of Buttons
Different Sizes of Buttons
Different Colors of Buttons
Buttons with Icons
Style API Custom Styles
#wd-page-root .wd-btn {
border-color: cyan;
background-color: black;
border-width: 2px;
border-radius: 6px;
}
#wd-page-root .wd-btn:hover {
background-color: #0c0096;
}
#wd-page-root .wd-btn.is-disabled {
background-color: #888;
}
#wd-page-root .wd-btn__text {
color: cyan;
}
CSS Variables Custom Styles
#wd-page-root .wd-btn {
--wd-btn-typography-sm: var(--wd-font-weight-regular) var(--wd-font-size-3)
var(--wd-font-family);
--wd-btn-typography-md: var(--wd-font-weight-regular) var(--wd-font-size-4)
var(--wd-font-family);
--wd-btn-typography-lg: var(--wd-font-weight-regular) var(--wd-font-size-5)
var(--wd-font-family);
--wd-btn-border-radius: 0.3rem;
--wd-btn-color-brand: var(--wd-color-success);
--wd-btn-color-brand-hover: var(--wd-color-success-hover);
--wd-btn-color-brand-active: var(--wd-color-success-active);
--wd-btn-color-brand-focus: var(--wd-color-success-focus);
--wd-btn-color-brand-disabled: var(--wd-color-success-disabled);
}
Properties
External properties received by the component
Property Name | Property Identifier | Type | Description |
|---|
| 加载中 | loading | boolean | 开启后按钮为加载中状态,展示文字加loading图标 |
| 展示图标 | iconType | string | 设置图标按钮 Default value: "none" |
| 图标类型 | iconSource | string | 选择图标的类型 Default value: "inner" |
| 图标样式 | icon | string | 选择预置图标 Example: "success" |
| 自定义图标 | iconSrc | string | 设置自定义图标地址 |
| 图标位置 | iconPosition | string | 设置图标位置 Default value: "before" |
| 是否禁用 | disabled | boolean | 开启后按钮将无法进行点击 |
| 表单类型 | formType | string | 按钮: 适用于常见的按钮点击使用场景,可在事件配置区中对按钮组件配置点击事件并触发相应的执行动作;重置: 需配合表单容器组件使用,将按钮放置在表单容器中,点击后即可重置表单容器中表单组件的输入信息;提交:需配合表单容器组件使用,将按钮放置在表单容器中,点击后即可对表单容器中的数据进行提交 Default value: "button" |
| 微信开放能力(Mini Program) | openType | string | 仅支持在小程序构建时使用,为按钮配置小程序能力相关的各项按钮属性,用于相关微信能力的调用 |
| 会话来源(Mini Program) | sessionFrom | string | |
| 会话内消息卡片标题(Mini Program) | sendMessageTitle | string | |
| 会话内消息卡片点击跳转小程序路径(Mini Program) | sendMessagePath | string | |
| 会话内消息卡片图片(Mini Program) | sendMessageImg | string | |
| 是否显示会话内消息卡片(Mini Program) | showMessageCard | boolean | |
| 打开APP时,向APP传递的参数(Mini Program) | appParameter | string | |
| 内容 | text | string | 设置按钮的文本内容 Example: "按钮" |
| 颜色 | theme | string | 设置按钮的颜色 Default value: "primary" |
| 类型 | variant | string | 设置按钮的类型 Default value: "base" |
| 尺寸 | size | string | 设置按钮的尺寸大小 Default value: "md" |
| 是否通栏 | block | boolean | 开启后按钮将撑满父容器 |
Events
Events exposed by the component. You can listen to component events to trigger external actions
Event Name | Event Code | Event Output Parameters event.detail | Applicable Scenarios | Description |
|---|
| 点击 | tap | Compatible with all platforms | - | |
| 客服会话 | contact | object
| Mini Program | - |
| 打开App | launchApp | Mini Program | - | |
| 打开授权设置 | openSetting | Mini Program | - |
Property API
Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API
Read-only Property Name | Property Identifier | Type | Description |
|---|
| 内容 | text | string | 设置按钮的文本内容 |
| 颜色 | theme | string | 设置按钮的颜色 |
| 类型 | variant | string | 设置按钮的类型 |
| 尺寸 | size | string | 设置按钮的尺寸大小 |
| 是否通栏 | block | boolean | 开启后按钮将撑满父容器 |
| 是否禁用 | disabled | boolean | 开启后按钮将无法进行点击 |
| 表单类型 | formType | string | 按钮: 适用于常见的按钮点击使用场景,可在事件配置区中对按钮组件配置点击事件并触发相应的执行动作;重置: 需配合表单容器组件使用,将按钮放置在表单容器中,点击后即可重置表单容器中表单组件的输入信息;提交:需配合表单容器组件使用,将按钮放置在表单容器中,点击后即可对表单容器中的数据进行提交 |
| 微信开放能力 | openType | string | 仅支持在小程序构建时使用,为按钮配置小程序能力相关的各项按钮属性,用于相关微信能力的调用 |
Method API
NoneStyle API
Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API
Name | Class Name | Description and Examples |
|---|
| 根元素 | .wd-btn | 按钮组件根元素 |
| 图标 | .wd-btn__icon | 按钮的图标元素(共享样式) |
| 前置图标 | .wd-btn__before-icon | 按钮内的前置图标 |
| 后置图标 | .wd-btn__after-icon | 按钮内的后置图标 |
| 禁用状态 | .wd-btn.is-disabled | 按钮禁用状态 |
| 文本 | .wd-btn__text | 按钮内显示的文本 |
| PC 端按钮根元素 | .wd-pc-btn | 可以为 PC 端的按钮编写样式 |
| H5 端按钮根元素 | .wd-h5-btn | 可以为 H5 端的按钮编写样式 |
| 小程序端按钮根元素 | .wd-mp-btn | 可以为小程序端的按钮编写样式 |
CSS Variables
.wd-btn {
--wd-btn-sm-padding: 0.0625rem calc(var(--wd-space-base) * 2);
--wd-btn-md-padding: 0.25rem calc(var(--wd-space-base) * 4);
--wd-btn-lg-padding: 0.4375rem calc(var(--wd-space-base) * 6);
--wd-btn-typography-sm: var(--wd-typography-body-sm);
--wd-btn-typography-md: var(--wd-typography-body-md);
--wd-btn-typography-lg: var(--wd-typography-body-lg);
--wd-btn-border-radius: var(--wd-border-radius);
// Text color
--wd-btn-color-text: var(--wd-color-text-default);
--wd-btn-color-text-inverse: var(--wd-color-text-inverse);
--wd-btn-color-text-hover: var(--wd-color-text-default);
--wd-btn-color-text-active: var(--wd-color-text-default);
--wd-btn-color-text-focus: var(--wd-color-text-default);
--wd-btn-color-text-disabled: var(--wd-color-text-disabled);
// Brand color
--wd-btn-color-brand: var(--wd-color-brand);
--wd-btn-color-brand-hover: var(--wd-color-brand-hover);
--wd-btn-color-brand-active: var(--wd-color-brand-active);
--wd-btn-color-brand-focus: var(--wd-color-brand-focus);
--wd-btn-color-brand-disabled: var(--wd-color-brand-disabled);
// Warning color
--wd-btn-color-warning: var(--wd-color-warning);
--wd-btn-color-warning-hover: var(--wd-color-warning-hover);
--wd-btn-color-warning-active: var(--wd-color-warning-active);
--wd-btn-color-warning-focus: var(--wd-color-warning-focus);
--wd-btn-color-warning-disabled: var(--wd-color-warning-disabled);
// Error color
--wd-btn-color-error: var(--wd-color-error);
--wd-btn-color-error-hover: var(--wd-color-error-hover);
--wd-btn-color-error-active: var(--wd-color-error-active);
--wd-btn-color-error-focus: var(--wd-color-error-focus);
--wd-btn-color-error-disabled: var(--wd-color-error-disabled);
// Gray
--wd-btn-color-gray: var(--wd-color-gray-3);
--wd-btn-color-gray-hover: var(--wd-color-gray-4);
--wd-btn-color-gray-active: var(--wd-color-gray-6);
--wd-btn-color-gray-focus: var(--wd-color-gray-3);
--wd-btn-color-gray-disabled: var(--wd-color-gray-2);
--wd-btn-color-gray-border: var(--wd-color-gray-4);
--wd-btn-color-gray-border-hover: var(--wd-color-gray-5);
--wd-btn-color-gray-border-active: var(--wd-color-gray-6);
--wd-btn-color-gray-border-disabled: var(--wd-color-gray-4);
// White background
--wd-btn-color-white: var(--wd-white);
--wd-btn-color-white-hover: var(--wd-color-gray-1);
--wd-btn-color-white-active: var(--wd-color-gray-3);
--wd-btn-color-white-disabled: var(--wd-color-gray-2);
}
Frequently Asked Questions
Why isn't the bound click event on the button triggered?
If a button is placed in a form and set to submit type, it will not respond to click events. You can listen for the form container's submit success event.
Version Changes
Compared to the old version button
- The default button size has been adjusted, and full-width button configuration has been added (after upgrading, the default size of existing buttons will change).
- Buttons have had their default padding removed, are no longer centered by default on the page, and individual buttons no longer occupy a full row by default on mobile (After upgrading, pay attention to layout changes and adjust as needed).
- Enriched the default button colors. After upgrading, please note the color changes of default buttons and adjust as needed.
- The disabled state style of buttons has been optimized.
- Buttons now support configuring icons within them.
- Enriched the default button types, providing options for filled, outlined, text, and link styles.