Button-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

A button initiates an immediate operation. It represents a command or a group of commands and triggers business logic when a user clicks it.

Properties

Property	Type	Required	Default value	Description
type	'default' \| 'primary' \| 'warn' \| 'danger' \| 'success' \| 'light'	No	'default'	The button type. default: A helper button. primary: A primary brand color button. warn: A warning button. danger: A danger button. success: A success button. light: A light button.
fill	'outline' \| 'solid' \| 'none'	No	'solid'	The fill style.
disabled	boolean	No	false	It is disabled.
activeClassName	string	No	-	The class name when the button is pressed.
subText	string	No	-	The helper text displayed on the second line.
inline	boolean	No	false	The element is inline and does not fill the width of the parent.
inlineSize	'small' \| 'medium' \| 'large' \| 'x-large'	No	'medium'	Inline size
icon	string	No	-	The icon on the left side of the button.
loading	boolean	No	false	Specifies whether the button is in the loading state. A button in the loading state cannot be clicked.
loadingText	string	No	-	The text displayed when the button is loading.
htmlType	'button' \| 'submit' \| 'reset'	No	'button'	The native type of the button. This property is effective for form submissions.
mode	string	No	-	Set `mode` to `form` when using the button with a form.
form	string	No	-	When using the button with a form, set this property to the `form` value of the form component.
className	string	No	-	The class name.

Events

Event name	Description	Event type
onTap	Click the button to trigger this callback.	( e: Event ) => void

Slots

Name	Description
icon	The icon slot.

Style classes

Code examples

Basic use

The `index.axml` file is as follows:

<view class="demo">
  <demo-block title="Fill mode">
    <view class="btn-list btn-list-default">
      <button 
        type="primary"
        fill="solid">
        solid
      </button>
      <button 
        type="primary"
        fill="outline">
        outline
      </button>
      <button 
        type="primary"
        fill="none">
        none
      </button>
    </view>
  </demo-block>
  <demo-block title="Semantic buttons">
    <view class="btn-list">
      <button 
        a:for="{{list}}" 
        type="{{item.type}}">
        {{item.type}}
      </button>
    </view>
  </demo-block>
  <demo-block title="Disabled state">
    <button 
      disabled
      type="primary">
      Disabled
    </button>
  </demo-block>
  <demo-block title="Loading state">
    <button 
      loading
      type="primary"
      loadingText="Loading...">
      Loading
    </button>
  </demo-block>
  <demo-block title="With subtitle">
    <view class="btn-list">
      <button 
        subText="Subtitle"
        type="primary">
        Button
      </button>
    </view>
  </demo-block>
</view>

The `index.js` file is as follows:

Page({
  data: {
    list: [
      { type: 'default' },
      { type: 'primary' },
      { type: 'warn' },
      { type: 'danger' },
      { type: 'success' },
      { type: 'light' },
    ],
  },
});

The `index.acss` file is as follows:

.btn-list-default {
  margin-bottom: -24rpx;
}

The `index.json` file is as follows:

{
  "defaultTitle": "Button",
  "usingComponents": {
    "button": "antd-mini/es/Button/index",
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "switch": "antd-mini/es/Switch/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}

Inline buttons

The `index.axml` file is as follows:

<view class="demo">
  <demo-block title="Fill mode">
    <view class="container">
      <button 
        a:for="{{fills}}" 
        fill="{{item}}" 
        type="primary"
        inline="{{true}}" >
        {{item}}
      </button>
    </view>
  </demo-block>
  <demo-block title="Semantic buttons">
    <view class="container">
      <button 
        a:for="{{types}}" 
        type="{{item}}" 
        inline="{{true}}" >
        {{item}}
      </button>
    </view>
  </demo-block>
  <demo-block title="Button sizes">
    <view class="container">
      <button 
        a:for="{{sizes}}" 
        type="primary" 
        inline="{{true}}"
        inlineSize="{{item}}">
        {{item}}
      </button>
    </view>
  </demo-block>
  <demo-block title="Disabled state">
    <view class="container">
      <button 
        type="primary" 
        inline="{{true}}"
        disabled="{{true}}">
        Disabled
      </button>
    </view>
  </demo-block>
  <demo-block title="Loading state">
    <view class="container">
      <button 
        type="primary" 
        inline="{{true}}"
        loading="{{true}}" 
        loadingText="Loading...">
        Loading
      </button>
    </view>
  </demo-block>
</view>

The `index.js` file is as follows:

Page({
  data: {
    types: ['default', 'primary', 'warn', 'danger', 'success', 'light'],
    sizes: ['small', 'medium', 'large', 'x-large'],
    fills: ['solid', 'outline', 'none'],
  },
});

The `index.acss` file is as follows:

.container button {
  margin-right: 12rpx;
  margin-bottom: 8rpx;
}

The `index.json` file is as follows:

{
  "defaultTitle": "Button",
  "usingComponents": {
    "button": "antd-mini/es/Button/index",
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "switch": "antd-mini/es/Switch/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}

Custom icon

The `index.axml` file is as follows:

  <demo-block title="Custom icon">
    <view class="btn-list">
      <button 
        type="primary" 
        icon="AppOutline"
        onTap="handleTap" >
        Icon
      </button>
    
      <button 
        type="primary" 
        icon="{{url}}"
        onTap="handleTap" >
        Image
      </button>
    
      <button 
        type="primary" 
        onTap="handleTap" >
        <view slot="icon">※</view>Use icon slot
      </button>
    </view>
  </demo-block>

The `index.js` file is as follows:

Page({
  data: {
    url: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
  },
  handleTap() {
    my.alert({
      title: 'tap',
    });
  },
});

The `index.json` file is as follows:

{
  "defaultTitle": "Button",
  "usingComponents": {
    "button": "antd-mini/es/Button/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}

Helper buttons

The `index.axml` file is as follows:

<demo-block title="Helper buttons">
  <view class="container-1">
    <button type="default" fill="solid">Secondary action</button>
    <button type="primary" fill="solid">Primary action</button>
  </view>
  
  <view class="container-2">
    <button type="default" fill="solid">Secondary action</button>
    <button type="primary" fill="outline">Primary action</button>
  </view>
  
  <view class="container-3">
    <button type="default" inline="{{true}}">Secondary action</button>
    <button type="primary" inline="{{true}}">Primary action</button>
  </view>
  
  <view class="container-4">
    <button type="default" fill="solid" inline="{{true}}">Secondary action</button>
    <button type="primary" fill="outline" inline="{{true}}">Primary action</button>
  </view>  
</demo-block>

The `index.js` file is as follows:

Page({
});

The `index.acss` file is as follows:

.container-1,
.container-2 {
  display: flex;
  margin: 12px 0;
}

.container-3,
.container-4 {
  margin: 12px 0;
}

.container-1 .amd-button:first-child,
.container-2 .amd-button:first-child,
.container-3 .amd-button:first-child,
.container-4 .amd-button:first-child {
  margin-right: 6px;
}

.container-1 .amd-button:last-child,
.container-2 .amd-button:last-child,
.container-3 .amd-button:last-child,
.container-4 .amd-button:last-child {
  margin-right: 6px;
}

.amd-button {
  flex: 1;
}

The `index.json` file is as follows:

{
    "defaultTitle": "Button",
    "usingComponents": {
      "button": "antd-mini/es/Button/index",
      "demo-block": "../../components/DemoBlock/index"
    }
  }

Class name	Description
amd-button	Overall style.
amd-button-content	Button content style.
amd-button-loading-container	Loading area style.
amd-button-loading-text	Loading area text style.
amd-button-loading	Loading animation style.
amd-button-wrap	Styles for the right side of the load area
amd-button-icon	Icon style.
amd-button-text	Button text style.
amd-button-subtext	Subtitle style.