All Products
Search
Document Center

AButton

Last Updated: May 27, 2021

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

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

ESModule

 
  1. 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

Sample code

 
  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton >主按钮</AButton>
  4. <AButton type="white">次按钮</AButton>
  5. <AButton disabled>按钮不可点</AButton>
  6. <AButton href="#">a标签 主按钮</AButton>
  7. <AButton href="#" type="white">a标签 次按钮</AButton>
  8. <AButton href="#" disabled>a标签 按钮不可点</AButton>
  9. </div>
  10. </template>
  11. <style scoped>
  12. .am-button {
  13. margin-bottom: 20px;
  14. }
  15. </style>

Auxiliary button

Sample image

Sample code

 
  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton size="tiny" type="white">辅助按钮</AButton>
  4. <AButton size="tiny" type="white" disabled>辅助按钮</AButton>
  5. <AButton href="#" size="tiny" type="white">辅助按钮</AButton>
  6. <AButton href="#" size="tiny" type="white" disabled>辅助按钮</AButton>
  7. <AButton size="tiny">辅助按钮</AButton>
  8. <AButton size="tiny" disabled>辅助按钮</AButton>
  9. <AButton href="#" size="tiny">辅助按钮</AButton>
  10. <AButton href="#" size="tiny" disabled>辅助按钮</AButton>
  11. </div>
  12. </template>
  13. <style scoped>
  14. .am-button {
  15. margin-bottom: 20px;
  16. }
  17. </style>

Load

Sample image

Sample code

 
  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton loading>加载中...</AButton>
  4. <AButton success>付款成功...</AButton>
  5. <AButton loading type="blue">加载中...</AButton>
  6. <AButton loading type="white">加载中...</AButton>
  7. <AButton loading type="warn">加载中...</AButton>
  8. <AButton loading type="bottom">加载中...</AButton>
  9. <AButton loading type="blue" size="tiny">加载中...</AButton>
  10. <AButton loading type="white" size="tiny">加载中...</AButton>
  11. </div>
  12. </template>
  13. <style scoped>
  14. .am-button {
  15. margin-bottom: 20px;
  16. }
  17. </style>

Warning

Sample image

Sample code

 
  1. <template>
  2. <div style="padding: 10px 0;">
  3. <AButton type="warn">警示按钮</AButton>
  4. <AButton type="warn" disbaled>警示按钮</AButton>
  5. </div>
  6. </template>
  7. <style scoped>
  8. .am-button {
  9. margin-bottom: 20px;
  10. }
  11. </style>