All Products
Search
Document Center

Mobile Platform as a Service:AButton

Last Updated:Mar 07, 2022

The AButton topic describes different methods of using this component and the API descriptions:

  • Use this component in the Kylin project.

  • Use this component in other projects. Import it through ESModule.

  • API description provides API information for props, slots, and events.

To view the visual effects and code sample of the component, see Demo.

Kylin

<dependency component="{ AButton }" src="@alipay/antui-vue" ></dependency>

ESModule

import { AButton } from '@alipay/antui-vue';

API description

props

Property

Description

Type

Default value

type

The type of the button. Valid values: blue, white, warn, bottom, and page-result (only for PageResult).

String

blue

size

The size of the button. Valid values: default and tiny. When it is set to tiny, type must be white and blue (unavailable for [type=page-result]).

String

default

disabled

Disable a button (unavailable for [type=page-result]).

Boolean

false

loading

Set a button icon to loading, applicable only when size=default (unavailable for [type=page-result]).

Boolean

false

success

Set a button icon to success, applicable only when size=default (unavailable for [type=page-result]).

Boolean

false

nativeType

type attribute in DOM

String

button

href

When it is not empty, use the a tag for rendering; otherwise, use the button tag for rendering by default.

String

-

inactiveLoading

When it is set to true and loading is set to true, trigger no tap event and retain the style of button. When it is set to false, retain the original action of loading.

Boolean

false

slots

Name

Description

Scope

-

The default slot for filling in the button text.

-

icon

The custom node for filling the icon. The default value is filled in when loading/success is set.

-

events

Name

Description

Function

tap

The operation when you press a mouse button.

Function(event: Event): void

Demo

Button

Sample image

Primary button

Sample code

<template>

  <div style="padding: 10px;">
    <AButton >Primary Button</AButton>
    <AButton type="white">Secondary Button</AButton>
    <AButton disabled>Button Unavailable</AButton>

    <AButton href="#">a Tag Primary Button</AButton>
    <AButton href="#" type="white">a Tag Secondary Button</AButton>
    <AButton href="#" disabled>a Tag Button Unavailable</AButton>
  </div>

</template>

<style scoped>
.am-button {
  margin-bottom: 20px;
}
</style>

Auxiliary button

Sample image

Auxiliary button

Sample code

<template>

  <div style="padding: 10px;">

    <AButton size="tiny" type="white">Auxiliary Button</AButton>
    <AButton size="tiny" type="white" disabled>Auxiliary Button</AButton>

    <AButton href="#" size="tiny" type="white">Auxiliary Button</AButton>
    <AButton href="#" size="tiny" type="white" disabled>Auxiliary Button</AButton>

    <AButton size="tiny">Auxiliary Button</AButton>
    <AButton size="tiny" disabled>Auxiliary Button</AButton>

    <AButton href="#" size="tiny">Auxiliary Button</AButton>
    <AButton href="#" size="tiny" disabled>Auxiliary Button</AButton>

  </div>

</template>

<style scoped>
.am-button {
  margin-bottom: 20px;
}
</style>

Load

Sample image

Loading

Sample code

<template>

  <div style="padding: 10px;">
    <AButton loading>Loading...</AButton>
    <AButton success>Payment Succeeded...</AButton>

    <AButton loading type="blue">Loading...</AButton>
    <AButton loading type="white">Loading...</AButton>
    <AButton loading type="warn">Loading...</AButton>
    <AButton loading type="bottom">Loading...</AButton>
    <AButton loading type="blue" size="tiny">Loading...</AButton>
    <AButton loading type="white" size="tiny">Loading...</AButton>
  </div>

</template>

<style scoped>
.am-button {
  margin-bottom: 20px;
}
</style>

Warning

Sample image

Alarm button

Sample code

<template>

  <div style="padding: 10px 0;">
    <AButton type="warn">Alarm Button</AButton>
    <AButton type="warn" disbaled>Alarm Button</AButton>
  </div>

</template>

<style scoped>
.am-button {
  margin-bottom: 20px;
}
</style>