Skip to main content
Supported Regions:上海

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​

  1. Basic properties of buttons support configuration of title, color, type, size, and full-width display, allowing flexible selection and combination.
  2. 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

Mini Program Sharing

Launch Customer Service Chat

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
加载中loadingboolean

开启后按钮为加载中状态,展示文字加loading图标

展示图标iconTypestring

设置图标按钮

Default value: "none"

图标类型iconSourcestring

选择图标的类型

Default value: "inner"

图标样式iconstring

选择预置图标

Example: "success"

自定义图标iconSrcstring

设置自定义图标地址

图标位置iconPositionstring

设置图标位置

Default value: "before"

是否禁用disabledboolean

开启后按钮将无法进行点击

表单类型formTypestring

按钮: 适用于常见的按钮点击使用场景；重置、提交: 需配合表单容器组件使用，不触发点击事件

按钮： 适用于常见的按钮点击使用场景，可在事件配置区中对按钮组件配置点击事件并触发相应的执行动作；重置： 需配合表单容器组件使用，将按钮放置在表单容器中，点击后即可重置表单容器中表单组件的输入信息；提交：需配合表单容器组件使用，将按钮放置在表单容器中，点击后即可对表单容器中的数据进行提交

Default value: "button"

微信开放能力(Mini Program)openTypestring

仅支持在小程序构建时使用，为按钮配置小程序能力相关的各项按钮属性，用于相关微信能力的调用

会话来源(Mini Program)sessionFromstring
会话内消息卡片标题(Mini Program)sendMessageTitlestring
会话内消息卡片点击跳转小程序路径(Mini Program)sendMessagePathstring
会话内消息卡片图片(Mini Program)sendMessageImgstring
是否显示会话内消息卡片(Mini Program)showMessageCardboolean
打开APP时,向APP传递的参数(Mini Program)appParameterstring
内容textstring

设置按钮的文本内容

Example: "按钮"

颜色themestring

设置按钮的颜色

Default value: "primary"

类型variantstring

设置按钮的类型

Default value: "base"

尺寸sizestring

设置按钮的尺寸大小

Default value: "md"

是否通栏blockboolean

开启后按钮将撑满父容器

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
点击tapCompatible with all platforms

-

客服会话contactobject
  • errMsg: string错误信息

    错误信息
  • path: string小程序消息指定的路径

    小程序消息指定的路径
  • query: object 小程序消息指定的查询参数

    小程序消息指定的查询参数
    		Mini Program

    -

    打开ApplaunchAppMini Program

    -

    打开授权设置openSettingMini 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
    内容textstring

    设置按钮的文本内容

    颜色themestring

    设置按钮的颜色

    类型variantstring

    设置按钮的类型

    尺寸sizestring

    设置按钮的尺寸大小

    是否通栏blockboolean

    开启后按钮将撑满父容器

    是否禁用disabledboolean

    开启后按钮将无法进行点击

    表单类型formTypestring

    按钮： 适用于常见的按钮点击使用场景，可在事件配置区中对按钮组件配置点击事件并触发相应的执行动作；重置： 需配合表单容器组件使用，将按钮放置在表单容器中，点击后即可重置表单容器中表单组件的输入信息；提交：需配合表单容器组件使用，将按钮放置在表单容器中，点击后即可对表单容器中的数据进行提交

    微信开放能力openTypestring

    仅支持在小程序构建时使用，为按钮配置小程序能力相关的各项按钮属性，用于相关微信能力的调用

    Method API​

    None

    Style 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按钮组件根元素
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-btn {
  /* Write CSS styles here */
}
    图标.wd-btn__icon按钮的图标元素（共享样式）
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-btn__icon {
  /* Write CSS styles here */
}
    前置图标.wd-btn__before-icon按钮内的前置图标
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-btn__before-icon {
  /* Write CSS styles here */
}
    后置图标.wd-btn__after-icon按钮内的后置图标
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-btn__after-icon {
  /* Write CSS styles here */
}
    禁用状态.wd-btn.is-disabled按钮禁用状态
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-btn.is-disabled {
  /* Write CSS styles here */
}
    文本.wd-btn__text按钮内显示的文本
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-btn__text {
  /* Write CSS styles here */
}
    PC 端按钮根元素.wd-pc-btn可以为 PC 端的按钮编写样式
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-btn {
  /* Write CSS styles here */
}
    H5 端按钮根元素.wd-h5-btn可以为 H5 端的按钮编写样式
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-btn {
  /* Write CSS styles here */
}
    小程序端按钮根元素.wd-mp-btn可以为小程序端的按钮编写样式
    /* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-btn {
  /* Write CSS styles here */
}

    Learn about Style API

    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.