使用场景
用于提交、确认、返回等离散操作。通过 type 选择颜色，通过 plain、text、link 等属性选择形态。省略 type 时依次继承按钮组和已配置的 provider 类型；未配置时使用 secondary。
语义颜色与点击
按钮点击更新本地计数。禁用和加载中的按钮不会发出业务点击事件。
语义颜色与点击
vue
<template>
<div class="example">
<div class="row">
<AsamButton @click="count++"> 默认操作 </AsamButton>
<AsamButton type="primary" @click="count++"> 主要操作 </AsamButton>
<AsamButton type="gradient"> 渐变操作 </AsamButton>
<AsamButton type="accent"> 强调操作 </AsamButton>
<AsamButton type="success"> 成功 </AsamButton>
<AsamButton type="warning"> 提醒 </AsamButton>
<AsamButton type="danger"> 危险 </AsamButton>
<AsamButton type="info"> 信息 </AsamButton>
<AsamButton disabled @click="count++"> 禁用 </AsamButton>
</div>
<output>点击次数：{{ count }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamButtonBasicExample' });
import { ref } from 'vue';
import { AsamButton } from '@asam-ui/ui';
const count = ref(0);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<div class="row">
<AsamButton @click="count++"> 默认操作 </AsamButton>
<AsamButton type="primary" @click="count++"> 主要操作 </AsamButton>
<AsamButton type="gradient"> 渐变操作 </AsamButton>
<AsamButton type="accent"> 强调操作 </AsamButton>
<AsamButton type="success"> 成功 </AsamButton>
<AsamButton type="warning"> 提醒 </AsamButton>
<AsamButton type="danger"> 危险 </AsamButton>
<AsamButton type="info"> 信息 </AsamButton>
<AsamButton disabled @click="count++"> 禁用 </AsamButton>
</div>
<output>点击次数：{{ count }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamButtonBasicExample' });
import { ref } from 'vue';
import { AsamButton } from '@asam-ui/ui';
const count = ref(0);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>形态与自定义颜色
颜色与形态可组合；自定义 color 同样适用于 text 和 link，分别改变文字颜色。circle 通常搭配图标和可访问名称；tag 可以选择原生标签或组件。
形态与自定义颜色
vue
<template>
<div class="example">
<div class="row">
<AsamButton type="primary" plain> 描边 </AsamButton>
<AsamButton text bg> 文字背景 </AsamButton>
<AsamButton link> 链接形态 </AsamButton>
<AsamButton round> 圆角 </AsamButton>
<AsamButton dashed> 虚线 </AsamButton>
<AsamButton color="#526d82"> 自定义颜色 </AsamButton>
<AsamButton color="#526d82" text> 自定义文字颜色 </AsamButton>
<AsamButton color="#526d82" link> 自定义链接颜色 </AsamButton>
<AsamButton tag="a" href="#api"> 查看 API </AsamButton>
<AsamButton auto-insert-space> 保存 </AsamButton>
</div>
<AsamButton block :press-animation="false"> 撑满宽度，关闭按压动画 </AsamButton>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamButtonAppearanceExample' });
import { AsamButton } from '@asam-ui/ui';
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<div class="row">
<AsamButton type="primary" plain> 描边 </AsamButton>
<AsamButton text bg> 文字背景 </AsamButton>
<AsamButton link> 链接形态 </AsamButton>
<AsamButton round> 圆角 </AsamButton>
<AsamButton dashed> 虚线 </AsamButton>
<AsamButton color="#526d82"> 自定义颜色 </AsamButton>
<AsamButton color="#526d82" text> 自定义文字颜色 </AsamButton>
<AsamButton color="#526d82" link> 自定义链接颜色 </AsamButton>
<AsamButton tag="a" href="#api"> 查看 API </AsamButton>
<AsamButton auto-insert-space> 保存 </AsamButton>
</div>
<AsamButton block :press-animation="false"> 撑满宽度，关闭按压动画 </AsamButton>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamButtonAppearanceExample' });
import { AsamButton } from '@asam-ui/ui';
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>图标与自定义加载
使用 icon 或插槽配置图标；loading 时显示加载图标。覆盖顺序与尺寸配置见下方说明。
图标与自定义加载
vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="example">
<div class="row">
<AsamButton :icon="Search" :icon-size="18"> 查询 </AsamButton>
<AsamButton :icon="ArrowRight" icon-position="right"> 下一步 </AsamButton>
<AsamButton circle :icon="Plus" aria-label="新增" />
<AsamButton icon="Ui027DemoSearchIcon" data-case="registered-icon">
字符串组件名
</AsamButton>
<AsamButton
:icon="Search"
:loading="loading"
:loading-icon="Loading"
data-case="loading-icon"
@click="loading = true"
>
提交
</AsamButton>
<AsamButton
:icon="ArrowRight"
icon-position="right"
:loading="loading"
data-case="loading-right-icon"
>
右侧图标加载
</AsamButton>
<AsamButton loading :icon="Search" data-case="loading-slot-icon">
<template #loading>
<Loading style="width: 16px" />
</template>
加载插槽
</AsamButton>
<AsamButton :icon="Search">
<template #icon>
<Check style="width: 16px" />
</template>
图标插槽
</AsamButton>
<AsamButton @click="loading = false"> 重置加载 </AsamButton>
</div>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamButtonIconsExample' });
import { getCurrentInstance, ref } from 'vue';
import { AsamButton } from '@asam-ui/ui';
import { Search, ArrowRight, Plus, Loading, Check } from '@asam-ui/icons-vue';
const loading = ref(false);
const app = getCurrentInstance()?.appContext.app;
if (app && !app.component('Ui027DemoSearchIcon')) app.component('Ui027DemoSearchIcon', Search);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="example">
<div class="row">
<AsamButton :icon="Search" :icon-size="18"> 查询 </AsamButton>
<AsamButton :icon="ArrowRight" icon-position="right"> 下一步 </AsamButton>
<AsamButton circle :icon="Plus" aria-label="新增" />
<AsamButton icon="Ui027DemoSearchIcon" data-case="registered-icon">
字符串组件名
</AsamButton>
<AsamButton
:icon="Search"
:loading="loading"
:loading-icon="Loading"
data-case="loading-icon"
@click="loading = true"
>
提交
</AsamButton>
<AsamButton
:icon="ArrowRight"
icon-position="right"
:loading="loading"
data-case="loading-right-icon"
>
右侧图标加载
</AsamButton>
<AsamButton loading :icon="Search" data-case="loading-slot-icon">
<template #loading>
<Loading style="width: 16px" />
</template>
加载插槽
</AsamButton>
<AsamButton :icon="Search">
<template #icon>
<Check style="width: 16px" />
</template>
图标插槽
</AsamButton>
<AsamButton @click="loading = false"> 重置加载 </AsamButton>
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamButtonIconsExample' });
import { getCurrentInstance, ref } from 'vue';
import { AsamButton } from '@asam-ui/ui';
import { Search, ArrowRight, Plus, Loading, Check } from '@asam-ui/icons-vue';
const loading = ref(false);
const app = getCurrentInstance()?.appContext.app;
if (app && !app.component('Ui027DemoSearchIcon')) app.component('Ui027DemoSearchIcon', Search);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>原生提交与实例状态
nativeType 区分 button、submit、reset；click 事件携带 MouseEvent。实例返回当前解析后的 size、type、disabled 等状态。
原生提交与实例状态
vue
<template>
<div class="example">
<form @submit.prevent="submitted++" @reset="submitted = 0">
<div class="row">
<AsamButton ref="button" native-type="submit" type="primary"> 提交表单 </AsamButton>
<AsamButton native-type="reset"> 重置表单 </AsamButton>
<AsamButton @click="inspect"> 读取状态 </AsamButton>
</div>
</form>
<output>提交次数：{{ submitted }}；{{ state }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamButtonNativeExample' });
import { ref } from 'vue';
import { AsamButton } from '@asam-ui/ui';
import type { AsamButtonExpose } from '@asam-ui/ui';
const button = ref<AsamButtonExpose>();
const submitted = ref(0);
const state = ref('');
function inspect() {
state.value = button.value
? [button.value.size, button.value.type, button.value.disabled].join(' / ')
: '';
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<form @submit.prevent="submitted++" @reset="submitted = 0">
<div class="row">
<AsamButton ref="button" native-type="submit" type="primary"> 提交表单 </AsamButton>
<AsamButton native-type="reset"> 重置表单 </AsamButton>
<AsamButton @click="inspect"> 读取状态 </AsamButton>
</div>
</form>
<output>提交次数：{{ submitted }}；{{ state }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamButtonNativeExample' });
import { ref } from 'vue';
import { AsamButton } from '@asam-ui/ui';
const button = ref();
const submitted = ref(0);
const state = ref('');
function inspect() {
state.value = button.value
? [button.value.size, button.value.type, button.value.disabled].join(' / ')
: '';
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档密度与继承
large / big / default / small 分别为四档密度。显式 size 覆盖继承；省略 size 时按组件、组、表单、ConfigProvider 到 default 解析。通过切换 provider 验证继承响应。
四档密度与继承
vue
<template>
<div class="example">
<div class="row">
<AsamButton size="large" v-bind="{ class: 'field', 'aria-label': 'large尺寸' }">
操作
</AsamButton>
<AsamButton size="big" v-bind="{ class: 'field', 'aria-label': 'big尺寸' }">
操作
</AsamButton>
<AsamButton size="default" v-bind="{ class: 'field', 'aria-label': 'default尺寸' }">
操作
</AsamButton>
<AsamButton size="small" v-bind="{ class: 'field', 'aria-label': 'small尺寸' }">
操作
</AsamButton>
</div>
<AsamConfigProvider :size="density">
<div class="example">
<AsamButton v-bind="{ class: 'field', 'aria-label': '继承尺寸' }">
操作
</AsamButton>
<div class="row">
<AsamButton @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton @click="density = 'big'"> 继承 big </AsamButton>
</div>
</div>
</AsamConfigProvider>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamButtonSizesExample' });
import { ref } from 'vue';
import { AsamButton, AsamConfigProvider } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<div class="row">
<AsamButton size="large" v-bind="{ class: 'field', 'aria-label': 'large尺寸' }">
操作
</AsamButton>
<AsamButton size="big" v-bind="{ class: 'field', 'aria-label': 'big尺寸' }">
操作
</AsamButton>
<AsamButton size="default" v-bind="{ class: 'field', 'aria-label': 'default尺寸' }">
操作
</AsamButton>
<AsamButton size="small" v-bind="{ class: 'field', 'aria-label': 'small尺寸' }">
操作
</AsamButton>
</div>
<AsamConfigProvider :size="density">
<div class="example">
<AsamButton v-bind="{ class: 'field', 'aria-label': '继承尺寸' }">
操作
</AsamButton>
<div class="row">
<AsamButton @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton @click="density = 'big'"> 继承 big </AsamButton>
</div>
</div>
</AsamConfigProvider>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamButtonSizesExample' });
import { ref } from 'vue';
import { AsamButton, AsamConfigProvider } from '@asam-ui/ui';
const density = ref('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
ASAM 扩展包括 gradient、secondary、accent、ghost、text 颜色、block、图标位置及尺寸、pressAnimation。 完整说明。
全局类型与覆盖优先级
类型按显式 type、按钮组 type、ConfigProvider.button.type、secondary 默认的顺序解析。 完整说明。
全局类型与覆盖优先级
vue
<template>
<div class="example">
<label>
全局类型
<AsamSelect aria-label="全局按钮类型" v-model="providerTypeControl">
<AsamOption value="__asam_example_unconfigured__" :label="'未配置'"
>未配置</AsamOption
>
<AsamOption v-for="type in nativeTypes" :key="type" :value="type" :label="type">{{
type
}}</AsamOption>
</AsamSelect>
</label>
<AsamConfigProvider :button="{ type: providerType }">
<AsamButton data-case="provider-inherited">继承全局类型</AsamButton>
<AsamButton data-case="provider-explicit" type="danger">显式 danger</AsamButton>
<AsamButtonGroup type="gradient">
<AsamButton data-case="provider-group">继承按钮组</AsamButton>
<AsamButton data-case="group-explicit" type="accent"> 显式 accent </AsamButton>
</AsamButtonGroup>
</AsamConfigProvider>
<output>全局类型：{{ providerType ?? '未配置' }}</output>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import {
AsamSelect,
AsamOption,
AsamButton,
AsamButtonGroup,
AsamConfigProvider
} from '@asam-ui/ui';
const nativeTypes = ['primary', 'success', 'warning', 'danger', 'info', 'default'] as const;
const providerType = ref<(typeof nativeTypes)[number] | undefined>('success');
defineOptions({ name: 'AsamButtonProviderDemo' });
const providerTypeControl = computed({
get: () => providerType.value ?? '__asam_example_unconfigured__',
set: (value: unknown) => {
providerType.value =
value === '__asam_example_unconfigured__'
? undefined
: (value as typeof providerType.value);
}
});
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
select {
margin-inline-start: var(--asam-space-sm, 8px);
}
</style>vue
<template>
<div class="example">
<label>
全局类型
<AsamSelect aria-label="全局按钮类型" v-model="providerTypeControl">
<AsamOption value="__asam_example_unconfigured__" :label="'未配置'"
>未配置</AsamOption
>
<AsamOption v-for="type in nativeTypes" :key="type" :value="type" :label="type">{{
type
}}</AsamOption>
</AsamSelect>
</label>
<AsamConfigProvider :button="{ type: providerType }">
<AsamButton data-case="provider-inherited">继承全局类型</AsamButton>
<AsamButton data-case="provider-explicit" type="danger">显式 danger</AsamButton>
<AsamButtonGroup type="gradient">
<AsamButton data-case="provider-group">继承按钮组</AsamButton>
<AsamButton data-case="group-explicit" type="accent"> 显式 accent </AsamButton>
</AsamButtonGroup>
</AsamConfigProvider>
<output>全局类型：{{ providerType ?? '未配置' }}</output>
</div>
</template>
<script setup>
import { computed, ref } from 'vue';
import {
AsamSelect,
AsamOption,
AsamButton,
AsamButtonGroup,
AsamConfigProvider
} from '@asam-ui/ui';
/** @type {NonNullable<import('@asam-ui/ui').AsamConfigProviderProps['button']>['type'][]} */
const nativeTypes = ['primary', 'success', 'warning', 'danger', 'info', 'default'];
/** @type {import('vue').Ref<NonNullable<import('@asam-ui/ui').AsamConfigProviderProps['button']>['type']>} */
const providerType = ref('success');
defineOptions({ name: 'AsamButtonProviderDemo' });
const providerTypeControl = computed({
get: () => providerType.value ?? '__asam_example_unconfigured__',
set: (value) => {
providerType.value = value === '__asam_example_unconfigured__' ? undefined : value;
}
});
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
select {
margin-inline-start: var(--asam-space-sm, 8px);
}
</style>原生间距与按压反馈
双汉字文本、嵌套内容的间距由原生判定。切换 disabled/loading 后，点击事件仍由原生过滤；四档按钮保持 ASAM 视觉按压反馈。
原生间距与点击、四档按压反馈
vue
<template>
<div class="example">
<AsamCheckboxItem v-model="space"> 原生双汉字间距</AsamCheckboxItem>
<AsamCheckboxItem v-model="disabled"> 禁用</AsamCheckboxItem>
<AsamCheckboxItem v-model="loading"> 加载</AsamCheckboxItem>
<div class="row">
<AsamButton
v-for="size in sizes"
:key="size"
:size="size"
:auto-insert-space="space"
:disabled="disabled"
:loading="loading"
@click="onClick"
>
确认
</AsamButton>
</div>
<AsamButton ref="control" :auto-insert-space="space" @click="onClick">确认</AsamButton>
<AsamButton :auto-insert-space="space" @click="onClick"><strong>确认</strong></AsamButton>
<output>
{{ clicks }} 次；原生间距： {{ control?.shouldAddSpace ?? false }}；{{ eventType }}
</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamButtonDelegationExample' });
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton } from '@asam-ui/ui';
import type { AsamButtonExpose, AsamControlSize } from '@asam-ui/ui';
const sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];
const space = ref(true);
const disabled = ref(false);
const loading = ref(false);
const clicks = ref(0);
const eventType = ref('尚未点击');
const control = ref<AsamButtonExpose>();
function onClick(event: MouseEvent) {
clicks.value++;
eventType.value = event.type;
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
.row {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
}
</style>vue
<template>
<div class="example">
<AsamCheckboxItem v-model="space"> 原生双汉字间距</AsamCheckboxItem>
<AsamCheckboxItem v-model="disabled"> 禁用</AsamCheckboxItem>
<AsamCheckboxItem v-model="loading"> 加载</AsamCheckboxItem>
<div class="row">
<AsamButton
v-for="size in sizes"
:key="size"
:size="size"
:auto-insert-space="space"
:disabled="disabled"
:loading="loading"
@click="onClick"
>
确认
</AsamButton>
</div>
<AsamButton ref="control" :auto-insert-space="space" @click="onClick">确认</AsamButton>
<AsamButton :auto-insert-space="space" @click="onClick"><strong>确认</strong></AsamButton>
<output>
{{ clicks }} 次；原生间距： {{ control?.shouldAddSpace ?? false }}；{{ eventType }}
</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamButtonDelegationExample' });
import { ref } from 'vue';
import { AsamCheckboxItem, AsamButton } from '@asam-ui/ui';
const sizes = ['large', 'big', 'default', 'small'];
const space = ref(true);
const disabled = ref(false);
const loading = ref(false);
const clicks = ref(0);
const eventType = ref('尚未点击');
const control = ref();
function onClick(event) {
clicks.value++;
eventType.value = event.type;
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md);
}
.row {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
}
</style>API 阅读方式
API 按公开类型与运行默认值生成；未知默认值不等于 false 或空值。 完整说明。
下方 API 来自当前公开类型与运行默认值。默认值标为“未知 / 未声明”时，不代表 false、空值或未支持。省略 size 保留祖先上下文继承。省略 disabled 保留表单禁用继承；加载与禁用状态阻止点击。
API
属性 AsamButtonProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 语义颜色；显式 type 优先于按钮组和配置提供器。独立使用时默认 secondary。 | enum"" | "default" | "text" | "primary" | "gradient" | "secondary" | "accent" | "success" | "danger" | "warning" | "info" | "ghost"完整类型：AsamButtonType | undefined | undefined |
size | 显式控件密度；省略时保留继承。 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
icon | 图标组件、已注册组件名或具名图标；icon 插槽优先。 | string | Component | undefined | — |
iconSize | 图标的像素宽高。 | number | undefined | 16 |
iconPosition | 自定义图标的位置。 | enum"right" | "left"完整类型："right" | "left" | undefined | 'left' |
loading | 显示加载内容并阻止触发操作。 | boolean | undefined | false |
loadingIcon | 自定义加载图标；loading 插槽优先。 | (AsamButtonProps)["loadingIcon"] | — |
disabled | 禁用交互；省略时保留表单继承。 | boolean | undefined | undefined |
block | 填满可用宽度。 | boolean | undefined | false |
nativeType | 原生按钮行为。 | enum"button" | "submit" | "reset"完整类型：AsamButtonNativeType | undefined | 'button' |
pressAnimation | 鼠标和键盘按下时的反馈。 | boolean | undefined | true |
plain | 语义颜色的描边样式。 | boolean | undefined | undefined |
text | 无常驻背景的文字样式，悬停时显示背景。 | boolean | undefined | undefined |
link | 行内链接样式。 | boolean | undefined | false |
bg | 始终显示文字按钮的背景。 | boolean | undefined | false |
autofocus | 原生自动聚焦。 | boolean | undefined | false |
round | 胶囊形圆角。 | boolean | undefined | undefined |
circle | 宽高相同。 | boolean | undefined | false |
dashed | 虚线边框。 | boolean | undefined | undefined |
color | 自定义颜色，并生成对应交互颜色。 | string | undefined | — |
dark | 为深色背景生成自定义颜色。 | boolean | undefined | false |
autoInsertSpace | 在恰好两个中文字符之间添加间距。 | boolean | undefined | undefined |
tag | 渲染原生标签或组件。 | string | Component | undefined | — |
事件 AsamButtonEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
click | — | [event: MouseEvent] | — |
插槽 AsamButtonSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
icon | — | (() => unknown) | undefined | — |
loading | — | (() => unknown) | undefined | — |
实例方法与状态 AsamButtonExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
ref | — | HTMLButtonElement | undefined | — |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | — |
type | — | enum"" | "default" | "text" | "primary" | "gradient" | "secondary" | "accent" | "success" | "danger" | "warning" | "info" | "ghost"完整类型：AsamButtonType | — |
disabled | — | boolean | — |
shouldAddSpace | 公开的实时原生文字间距状态；默认插槽保持原样透传。 | boolean | — |
属性与插槽补充说明
图标与加载规则
图标从 ASAM 图标包导入，可直接传组件，也可先注册到当前 Vue app 再将组件名字符串传给 icon。icon 插槽覆盖 icon 属性，loading 插槽覆盖 loadingIcon 属性。图标尺寸和位置由 iconSize、iconPosition 控制；已注册的字符串组件名会实际渲染对应图标。
加载时以加载图标或 loading 插槽替换普通 icon（包括右侧 icon 和 icon 插槽），加载结束后恢复普通图标。
用法与契约补充说明
ASAM 扩展与迁移
ASAM 扩展包括 gradient、secondary、accent、ghost、text 颜色、block、图标位置及尺寸、pressAnimation。旧 variant 属性与 AsamButtonVariant 类型已经删除：改用 type / AsamButtonType，形态用 plain、text、link。四档尺寸用 size，不要将形态名当作尺寸。
全局类型与覆盖优先级
类型按显式 type、按钮组 type、ConfigProvider.button.type、secondary 默认的顺序解析。全局 type 响应动态更新；未配置全局类型时独立按钮仍使用 ASAM secondary。按钮组与显式 gradient/accent 等 ASAM 扩展样式保持自己的优先级，不需要每个按钮重复设置 type。
API 阅读方式
secondary 是 ASAM 默认颜色，底层按钮映射为 type="default"；公开实例的 type 仍返回 ASAM 解析后的颜色。autoInsertSpace、双汉字判断、点击禁用及表单 reset 保留原生按钮行为；default slot 直接传递给原生按钮。shouldAddSpace 读取原生实例的实时状态。图标位置、尺寸及按压反馈属于 ASAM 视觉扩展；加载时由原生 loading 插槽替换普通图标。
关联组件
参数与事件补充说明
参数与事件说明
type
必填：否；声明来源：ASAM 声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "default" / "text" / "primary" / "gradient" / "secondary" / "accent" / "success" / "danger" / "warning" / "info" / "ghost"
默认值与来源
undefined（源码表达式；ASAM 声明）size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（源码表达式；ASAM 声明）icon
必填：否；声明来源：ASAM 声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<string | Component | undefined>, (...args: never[]) => unknown>>[1]): any
icon.__isFragment:undefined— 依赖声明icon.__isTeleport:undefined— 依赖声明icon.__isSuspense:undefined— 依赖声明
iconSize
必填：否；声明来源：ASAM 声明。
默认值与来源
16（源码表达式；ASAM 声明）iconPosition
必填：否；声明来源：ASAM 声明。
iconPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："right" / "left"
默认值与来源
'left'（源码表达式；ASAM 声明）loading
必填：否；声明来源：ASAM 声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）loadingIcon
必填：否；声明来源：ASAM 声明。
loadingIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamButtonProps)["loadingIcon"]>, (...args: never[]) => unknown>>[1]): any
loadingIcon.__isFragment:undefined— 依赖声明loadingIcon.__isTeleport:undefined— 依赖声明loadingIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：Loading（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：() => Loading（2.14.7；源码事实，未作为 ASAM 运行实测）
disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（源码表达式；ASAM 声明）block
必填：否；声明来源：ASAM 声明。
block 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（源码表达式；ASAM 声明）nativeType
必填：否；声明来源：ASAM 声明。
nativeType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："button" / "submit" / "reset"
默认值与来源
'button'（源码表达式；ASAM 声明）pressAnimation
必填：否；声明来源：ASAM 声明。
pressAnimation 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（源码表达式；ASAM 声明）plain
必填：否；声明来源：ASAM 声明。
plain 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（源码表达式；ASAM 声明）text
必填：否；声明来源：ASAM 声明。
text 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（源码表达式；ASAM 声明）link
必填：否；声明来源：ASAM 声明。
link 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）bg
必填：否；声明来源：ASAM 声明。
bg 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）autofocus
必填：否；声明来源：ASAM 声明。
autofocus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）round
必填：否；声明来源：ASAM 声明。
round 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（源码表达式；ASAM 声明）circle
必填：否；声明来源：ASAM 声明。
circle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）dashed
必填：否；声明来源：ASAM 声明。
dashed 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（源码表达式；ASAM 声明）color
必填：否；声明来源：ASAM 声明。
dark
必填：否；声明来源：ASAM 声明。
dark 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）autoInsertSpace
必填：否；声明来源：ASAM 声明。
autoInsertSpace 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（源码表达式；ASAM 声明）tag
必填：否；声明来源：ASAM 声明。
tag 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<string | Component | undefined>, (...args: never[]) => unknown>>[1]): any
tag.__isFragment:undefined— 依赖声明tag.__isTeleport:undefined— 依赖声明tag.__isSuspense:undefined— 依赖声明
AsamButtonProps 公开类型视图
ts
import type { Component, Attrs } from 'vue';
import type { AsamButtonProps, AsamButtonType, AsamControlSize, AsamButtonNativeType } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamButtonProps
type PublicContract = {
readonly "type"?: AsamButtonType | undefined;
readonly "size"?: AsamControlSize | undefined;
readonly "icon"?: string | Component | undefined;
readonly "iconSize"?: number | undefined;
readonly "iconPosition"?: "right" | "left" | undefined;
readonly "loading"?: boolean | undefined;
readonly "loadingIcon"?: (AsamButtonProps)["loadingIcon"];
readonly "disabled"?: boolean | undefined;
readonly "block"?: boolean | undefined;
readonly "nativeType"?: AsamButtonNativeType | undefined;
readonly "pressAnimation"?: boolean | undefined;
readonly "plain"?: boolean | undefined;
readonly "text"?: boolean | undefined;
readonly "link"?: boolean | undefined;
readonly "bg"?: boolean | undefined;
readonly "autofocus"?: boolean | undefined;
readonly "round"?: boolean | undefined;
readonly "circle"?: boolean | undefined;
readonly "dashed"?: boolean | undefined;
readonly "color"?: string | undefined;
readonly "dark"?: boolean | undefined;
readonly "autoInsertSpace"?: boolean | undefined;
readonly "tag"?: string | Component | undefined;
};参数与事件说明
click
必填：是；声明来源：ASAM 声明。
AsamButtonEmits 公开类型视图
ts
import type { AsamButtonEmits } from '@asam-ui/ui';
// AsamButtonEmits
type PublicContract = {
"click": [event: MouseEvent];
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
icon
必填：否；声明来源：ASAM 声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
loading
必填：否；声明来源：ASAM 声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamButtonSlots 公开类型视图
ts
import type { AsamButtonSlots } from '@asam-ui/ui';
// AsamButtonSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
"icon"?: (() => unknown) | undefined;
"loading"?: (() => unknown) | undefined;
};实时解析的状态，包含继承自表单的禁用状态。
参数与事件说明
ref
必填：是；声明来源：ASAM 声明。
ref 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
size
必填：是；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
type
必填：是；声明来源：ASAM 声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "default" / "text" / "primary" / "gradient" / "secondary" / "accent" / "success" / "danger" / "warning" / "info" / "ghost"
disabled
必填：是；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
shouldAddSpace
必填：是；声明来源：ASAM 声明。
shouldAddSpace 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
AsamButtonExpose 公开类型视图
ts
import type { AsamButtonExpose, AsamControlSize, AsamButtonType } from '@asam-ui/ui';
// AsamButtonExpose
type PublicContract = {
readonly "ref": HTMLButtonElement | undefined;
readonly "size": AsamControlSize;
readonly "type": AsamButtonType;
readonly "disabled": boolean;
readonly "shouldAddSpace": boolean;
};