Button 按钮

用于触发操作的基础交互组件，支持多种变体、尺寸和状态。

基础用法

默认 primary 按钮

vue

<template>
  <AButton>默认按钮</AButton>
</template>

<script setup lang="ts">
import { AButton } from '@lite-code/aui-vue'
</script>

变体

提供四种外观变体：primary、secondary、outline、ghost。

四种变体

vue

<template>
  <ASpace>
    <AButton variant="primary">Primary</AButton>
    <AButton variant="secondary">Secondary</AButton>
    <AButton variant="outline">Outline</AButton>
    <AButton variant="ghost">Ghost</AButton>
  </ASpace>
</template>

<script setup lang="ts">
import { AButton, ASpace } from '@lite-code/aui-vue'
</script>

尺寸

提供三种尺寸：sm、md（默认）、lg。

三种尺寸

vue

<template>
  <ASpace>
    <AButton size="sm">Small</AButton>
    <AButton size="md">Medium</AButton>
    <AButton size="lg">Large</AButton>
  </ASpace>
</template>

<script setup lang="ts">
import { AButton, ASpace } from '@lite-code/aui-vue'
</script>

禁用状态

禁用状态

vue

<template>
  <ASpace>
    <AButton disabled>禁用 Primary</AButton>
    <AButton variant="outline" disabled>禁用 Outline</AButton>
  </ASpace>
</template>

<script setup lang="ts">
import { AButton, ASpace } from '@lite-code/aui-vue'
</script>

加载状态

Loading 状态

vue

<template>
  <AButton loading>加载中...</AButton>
</template>

<script setup lang="ts">
import { AButton } from '@lite-code/aui-vue'
</script>

API

Props

属性	类型	默认值	说明
variant	'primary' | 'secondary' | 'outline' | 'ghost'	'primary'	按钮外观变体
size	'sm' | 'md' | 'lg'	'md'	按钮尺寸
loading	boolean	false	是否展示加载状态
disabled	boolean	false	是否禁用