Button 按钮

常用的操作触发器。支持七种视觉类型、三种尺寸、加载态、禁用态以及图标插槽。

基础用法

类型、状态与尺寸

类型、尺寸、禁用和 loading 状态集中展示，点击加载按钮可观察即时状态变化。

vue

<template>
  <div class="button-demo">
    <div class="au-doc-row">
      <AuButton
        v-for="button in buttonTypes"
        :key="button.type"
        :type="button.type"
      >
        {{ button.label }}
      </AuButton>
    </div>
    <div class="au-doc-row">
      <AuButton type="primary" plain>朴素按钮</AuButton>
      <AuButton type="success" round>圆角按钮</AuButton>
      <AuButton :icon="IconX">带图标</AuButton>
      <AuButton :icon="IconX" circle aria-label="关闭" />
      <AuButton disabled>禁用按钮</AuButton>
      <AuButton type="primary" :loading="saving" @click="saving = !saving">
        {{ saving ? '处理中' : '开始处理' }}
      </AuButton>
      <AuButton v-if="saving" @click="saving = false">重置加载状态</AuButton>
    </div>
    <div class="au-doc-row">
      <AuButton v-for="size in buttonSizes" :key="size.value" :size="size.value">
        {{ size.label }}
      </AuButton>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuButton, IconX } from 'aurora-plus';
const buttonTypes = [
  { type: 'default', label: '默认按钮' },
  { type: 'primary', label: '主要按钮' },
  { type: 'success', label: '成功按钮' },
  { type: 'warning', label: '警告按钮' },
  { type: 'danger', label: '危险按钮' },
  { type: 'info', label: '信息按钮' },
];
const buttonSizes = [
  { value: 'small', label: '小型按钮' },
  { value: 'default', label: '默认尺寸' },
  { value: 'large', label: '大型按钮' },
];
const saving = ref(false);
</script>

菜单式按钮

每个选项通过 selected-color 传入 rgb()、rgba() 等颜色值，选中背景由组件自动生成。

vue

<template>
  <template v-for="(action, index) in actions" :key="action.value">
    <AuButton
      :icon="action.icon"
      type="menu"
      :selected="activeAction === action.value"
      :selected-color="action.color"
      :aria-label="action.label"
      @click="activeAction = action.value"
    />
    <AuDivider
      v-if="index < actions.length - 1"
      orientation="vertical"
      aria-hidden="true"
    />
  </template>
  <p class="button-menu-demo__hint">
    每个选项通过 <code>selected-color</code> 传入 <code>rgb()</code>、<code>rgba()</code> 等颜色值，选中背景由组件自动生成。
  </p>
</template>
<script setup>
import { ref } from 'vue';
import {
  AuButton,
  AuDivider,
  IconArrowUp,
  IconBrandGit,
  IconCode,
  IconLayoutSidebar,
} from 'aurora-plus';
const activeAction = ref('sidebar');
const actions = [
  { value: 'sidebar', label: '侧边栏', icon: IconLayoutSidebar, color: 'rgb(52, 120, 246)' },
  { value: 'source', label: '源码模式', icon: IconCode, color: 'rgba(113, 128, 150, 0.95)' },
  { value: 'git', label: '源代码管理', icon: IconBrandGit, color: 'rgb(217, 138, 36)' },
  { value: 'top', label: '回到顶部', icon: IconArrowUp, color: '#2f9e72' },
];
</script>
<style scoped>
.button-menu-demo__hint {
  margin: 8px 0 0;
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
  line-height: 1.6;
}
</style>

使用建议

• 一个操作区域通常只保留一个 primary 按钮，避免多个主操作争夺注意力。
• 异步提交期间使用 loading。加载状态会同时禁用按钮，防止重复提交。
• 只有图标的按钮应提供 aria-label，让读屏软件能够说明按钮用途。
• 关闭入口直接使用 <AuButton :icon="IconX" circle aria-label="关闭" />，其中 IconX 从 aurora-plus 导入。
• 表单内若不希望触发表单提交，保留默认的 native-type="button"。

Button API

Attributes

属性	说明	类型	可选值	默认值
type	视觉类型	string	default / primary / success / info / warning / danger / menu	default
size	按钮尺寸	string	small / default / large	default
selected	是否选中；设置后同步输出 aria-pressed	boolean	—	undefined
selectedColor	menu 类型的选中颜色，背景由组件自动生成	string	十六进制、rgb()、rgba() 等颜色值	''
nativeType	原生 button 的 type	string	button / submit / reset	button
icon	图标组件	Component	—	null
plain	是否使用朴素样式	boolean	—	false
round	是否使用胶囊圆角	boolean	—	false
circle	是否为圆形图标按钮	boolean	—	false
disabled	是否禁用	boolean	—	false
loading	是否显示加载状态；开启时按钮不可点击	boolean	—	false

未被组件声明的属性（例如 aria-label、autofocus、form）会透传到原生 <button>。

Events

事件名	说明	参数
click	按钮可用且不处于加载状态时触发	(event: MouseEvent)

Slots

插槽名	说明
default	按钮文字或其他内容
icon	覆盖 icon 属性对应的默认图标
loading	覆盖加载状态的默认旋转图标