Button

2024-04-12 07:34

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:

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"
  }
}