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: | String |
|
size | The size of the button. Valid values: | String |
|
disabled | Disable a button (unavailable for | Boolean | false |
loading | Set a button icon to loading, applicable only when | Boolean | false |
success | Set a button icon to success, applicable only when | Boolean | false |
nativeType |
| String |
|
href | When it is not empty, use the | String | - |
inactiveLoading | When it is set to | Boolean |
|
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 | - |
events
Name | Description | Function |
---|---|---|
tap | The operation when you press a mouse button. | Function(event: Event): void |
Demo
Button
Sample image
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
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
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
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>