Button

Mini-program developers can use the Button component to create buttons in mini-program interfaces. This allows users to take actions or make choices, such as form submission, page redirection, and guiding users through the next steps in their journey. The Button component builds on the functionality of the basic button component, offering additional attributes for enhanced usage. This topic covers the user experience, additional attributes, and sample code for using the extended Button component.

User experience

The following image shows different types of buttons:

Button

Attributes

Attribute

Data type

Default

Description

type

String

default

The button type. Valid values are:

  • primary: Primary buttons.
  • default: Secondary buttons.
  • text: Text buttons.

danger

Boolean

false

Whether the button is for a dangerous action.

disabled

Boolean

false

Whether the button is disabled for interaction.

activeClassName

String

N/A

Class name when the button is pressed.

className

String

N/A

The class name for the component.

style

String

N/A

The style for the component.

inline

Boolean

false

Whether the button is an inline button.

icon

String

N/A

The icon displayed on the left side of the button. Specify this attribute using the icon names listed in Icon.

loading

Boolean

N/A

Whether the button is in a loading state. Note that buttons in a loading state are not clickable.

size

String

medium

The button size. This attribute is supported when inline is set to true. Valid values are:

  • small
  • medium
  • large

subText

String

N/A

Additional text that is displayed under the button name. This attribute is supported when inline is either unspecified or set to false.

catchTap

EventHandle

N/A

The callback function that is triggered when the button is clicked (non-bubbling).

onTap

EventHandle

N/A

The callback function that is triggered when the button is clicked.

Sample code

The following sample code shows how to create different buttons:

.axml

copy
<ant-container
  title="Button examples"
  className="list">
  <ant-button
    type="primary"
    onTap="handleTap">
    Basic primary button
  </ant-button>

  <ant-button
    type="default"
    onTap="handleTap">
    Basic secondary button
  </ant-button>

  <ant-button
    type="text"
    onTap="handleTap">
    Basic text button
  </ant-button>

  <ant-button
    type="primary"
    subText="Additional text"
    onTap="handleTap">
    Button with additional text
  </ant-button>

  <ant-button
    type="primary"
    disabled>
    Disabled button
  </ant-button>

  <ant-button
    type="primary"
    loading>
    Button in a loading state
  </ant-button>

  <ant-button
    type="primary"
    danger
    onTap="handleTap">
    Button for dangerous actions
  </ant-button>
</ant-container>

.js

copy
Page({
  handleTap(e) {
    my.alert({
      title: 'Button Clicked',
    });
  },
});

.acss

copy
button {
  margin-bottom: 8px;
}

.json

copy
{
  "defaultTitle": "Button",
  "usingComponents": {
    "ant-button": "antd-mini/es/Button/index",
    "ant-container": "antd-mini/es/Container/index"
  }
}