Skip to main content

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​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
内容textstring

设置按钮的文本内容

示例："按钮"

颜色themestring

设置按钮的颜色

默认值："primary"

类型variantstring

设置按钮的类型

默认值："base"

尺寸sizestring

设置按钮的尺寸大小

默认值："md"

是否通栏blockboolean

开启后按钮将撑满父容器

加载中loadingboolean

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

展示图标iconTypestring

设置图标按钮

默认值："none"

图标类型iconSourcestring

选择图标的类型

默认值："inner"

图标样式iconstring

选择预置图标

示例："success"

自定义图标iconSrcstring

设置自定义图标地址

图标位置iconPositionstring

设置图标位置

默认值："before"

是否禁用disabledboolean

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

表单类型formTypestring

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

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

默认值："button"

微信开放能力(小程序)openTypestring

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

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

Events​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
点击tap兼容三端

-

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

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

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

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

    -

    打开ApplaunchApp小程序

    -

    打开授权设置openSetting小程序

    -

    Property API​

    通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

    只读属性名
    属性标识
    类型
    说明
    内容textstring

    设置按钮的文本内容

    颜色themestring

    设置按钮的颜色

    类型variantstring

    设置按钮的类型

    尺寸sizestring

    设置按钮的尺寸大小

    是否通栏blockboolean

    开启后按钮将撑满父容器

    是否禁用disabledboolean

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

    表单类型formTypestring

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

    微信开放能力openTypestring

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

    Method API​

    无

    Style API​

    通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

    名称
    类名
    说明和示例
    根元素.wd-btn按钮组件根元素
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-btn {
  /* 在这里编写CSS 样式 */
}
    图标.wd-btn__icon按钮的图标元素（共享样式）
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-btn__icon {
  /* 在这里编写CSS 样式 */
}
    前置图标.wd-btn__before-icon按钮内的前置图标
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-btn__before-icon {
  /* 在这里编写CSS 样式 */
}
    后置图标.wd-btn__after-icon按钮内的后置图标
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-btn__after-icon {
  /* 在这里编写CSS 样式 */
}
    禁用状态.wd-btn.is-disabled按钮禁用状态
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-btn.is-disabled {
  /* 在这里编写CSS 样式 */
}
    文本.wd-btn__text按钮内显示的文本
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-btn__text {
  /* 在这里编写CSS 样式 */
}
    PC 端按钮根元素.wd-pc-btn可以为 PC 端的按钮编写样式
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-btn {
  /* 在这里编写CSS 样式 */
}
    H5 端按钮根元素.wd-h5-btn可以为 H5 端的按钮编写样式
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-btn {
  /* 在这里编写CSS 样式 */
}
    小程序端按钮根元素.wd-mp-btn可以为小程序端的按钮编写样式
    /* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-btn {
  /* 在这里编写CSS 样式 */
}

    了解样式 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.