AButton

AButton is the core action component of AnyUI. It supports several visual styles, three sizes, leading/trailing icons, a loading state, and the library’s signature springy press animation.

The same component ships for Vue, React and Svelte with an identical prop surface — only the binding syntax differs between frameworks.

Use Tab to focus a button, then press Enter or release Space to activate it. Disabled and loading buttons block activation and are skipped in the tab order. Loading buttons expose aria-busy.

Import

import { Button } from '@any-design/anyui/vue';
// React:  import { Button } from '@any-design/anyui/react';
// Svelte: import { Button } from '@any-design/anyui/svelte';

When you install the Vue plugin globally (app.use(AnyUI)) you can use <AButton> directly in templates without importing it.

Examples

Style types

The type prop drives the overall look. All three frameworks share the same styles, including primary, secondary, status colors, gradients, and depth.

<template>
  <div class="demo-row">
    <AButton>Default</AButton>
    <AButton type="primary">Primary</AButton>
    <AButton type="secondary">Secondary</AButton>
    <AButton type="gradient">Gradient</AButton>
    <AButton type="gradient-reverse">Gradient reverse</AButton>
    <AButton type="depth">Depth</AButton>
  </div>
</template>

Sizes

Three sizes are available: small, default, and large.

<template>
  <div class="demo-row">
    <AButton size="small">Small</AButton>
    <AButton>Default</AButton>
    <AButton size="large">Large</AButton>
  </div>
</template>

Rounded, animated, full-width

round produces a pill shape, anim adds the hover move-up effect, and fill stretches the button to its container.

<template>
  <AButton type="primary" round anim fill>Primary round + animated</AButton>
</template>

With an icon

Pass an Iconify icon name to icon. Use iconPosition to place it before (leading, the default) or after (trailing) the label.

<template>
  <div class="demo-row">
    <AButton type="primary" icon="ri:download-line">Download</AButton>
    <AButton icon="ri:arrow-right-line" iconPosition="trailing">Next</AButton>
  </div>
</template>

Loading and disabled

Set loading to swap the label for a spinner — the button also stops emitting clicks while loading. disabled greys it out and blocks interaction entirely.

<template>
  <div class="demo-row">
    <AButton type="primary" loading>Saving…</AButton>
    <AButton disabled>Disabled</AButton>
  </div>
</template>

Props

Prop	Type	Default	Description
`type`	`'default' \| 'primary' \| 'secondary' \| 'info' \| 'warn' \| 'danger' \| 'depth' \| 'gradient' \| 'gradient-reverse'`	`'default'`	Visual style. React/Svelte currently support `default`, `primary`, `gradient`, `gradient-reverse`.
`size`	`'default' \| 'small' \| 'large'`	`'default'`	Button size.
`round`	`Boolean`	`false`	Pill-shaped corners.
`anim`	`Boolean`	`false`	Hover move-up animation.
`disabled`	`Boolean`	`false`	Disables the button.
`fill`	`Boolean`	`false`	Stretches the button to fill its parent.
`loading`	`Boolean`	`false`	Shows a spinner and suppresses clicks.
`loadingIcon`	`String \| IconifyIcon`	`'quill:loading-spin'`	Icon used in the loading state.
`icon`	`String \| IconifyIcon`	`''`	Leading or trailing icon.
`iconPosition`	`'leading' \| 'trailing'`	`'leading'`	Where the icon sits relative to the label.
`textShadow`	`Boolean`	`false`	Applies a subtle text-shadow.

Events

Event	Payload	Description
`click`	`MouseEvent`	Native click. Use `onClick` in React/Svelte.

Slots

Slot	Props	Description
`default`	—	Button label (or `children` / snippet in React/Svelte).

AButton

AButton 是 AnyUI 的核心操作组件。它支持多种视觉风格、三种尺寸、前/后图标、加载态，以及 AnyUI 标志性的弹簧按压动画。

该组件在 Vue、React 和 Svelte 三端共享同一套 props，仅各框架的绑定语法略有不同。

使用 Tab 聚焦按钮，按下 Enter 或松开 Space 触发操作。禁用和加载中的按钮不可触发，且会从 Tab 焦点顺序中跳过。加载态同时提供 aria-busy。

引入

import { Button } from '@any-design/anyui/vue';
// React:  import { Button } from '@any-design/anyui/react';
// Svelte: import { Button } from '@any-design/anyui/svelte';

在 Vue 中通过 app.use(AnyUI) 全局注册后，可直接在模板里使用 <AButton>，无需手动引入。

示例

样式类型

type 属性决定整体外观。三个框架共享同一套样式，包括主色、辅色、状态色、渐变与立体样式。

<template>
  <div class="demo-row">
    <AButton>Default</AButton>
    <AButton type="primary">Primary</AButton>
    <AButton type="secondary">Secondary</AButton>
    <AButton type="gradient">Gradient</AButton>
    <AButton type="gradient-reverse">Gradient reverse</AButton>
    <AButton type="depth">Depth</AButton>
  </div>
</template>

尺寸

提供三种尺寸：small、default、large。

<template>
  <div class="demo-row">
    <AButton size="small">Small</AButton>
    <AButton>Default</AButton>
    <AButton size="large">Large</AButton>
  </div>
</template>

圆角、动画与撑满

round 生成胶囊形，anim 添加悬停上移动画，fill 让按钮撑满父容器宽度。

<template>
  <AButton type="primary" round anim fill>圆角主按钮 + 动画</AButton>
</template>

带图标

通过 icon 传入 Iconify 图标名，配合 iconPosition 控制图标位于文字前（leading，默认）或后（trailing）。

<template>
  <div class="demo-row">
    <AButton type="primary" icon="ri:download-line">下载</AButton>
    <AButton icon="ri:arrow-right-line" iconPosition="trailing">下一步</AButton>
  </div>
</template>

加载与禁用

loading 会用 spinner 替换文字，且加载期间不会触发点击；disabled 会置灰并完全阻止交互。

<template>
  <div class="demo-row">
    <AButton type="primary" loading>保存中…</AButton>
    <AButton disabled>禁用</AButton>
  </div>
</template>

属性

属性	类型	默认值	说明
`type`	`'default' \| 'primary' \| 'secondary' \| 'info' \| 'warn' \| 'danger' \| 'depth' \| 'gradient' \| 'gradient-reverse'`	`'default'`	视觉样式。React/Svelte 当前支持 `default`、`primary`、`gradient`、`gradient-reverse`。
`size`	`'default' \| 'small' \| 'large'`	`'default'`	按钮尺寸。
`round`	`Boolean`	`false`	胶囊形圆角。
`anim`	`Boolean`	`false`	悬停上移动画。
`disabled`	`Boolean`	`false`	禁用按钮。
`fill`	`Boolean`	`false`	撑满父容器宽度。
`loading`	`Boolean`	`false`	显示加载图标并屏蔽点击。
`loadingIcon`	`String \| IconifyIcon`	`'quill:loading-spin'`	加载态图标。
`icon`	`String \| IconifyIcon`	`''`	前 / 后图标。
`iconPosition`	`'leading' \| 'trailing'`	`'leading'`	图标相对文字的位置。
`textShadow`	`Boolean`	`false`	添加细微的文字阴影。

事件

事件	载荷	说明
`click`	`MouseEvent`	原生点击事件。React/Svelte 使用 `onClick`。

插槽

插槽	作用域参数	说明
`default`	—	按钮文字（React/Svelte 为 `children` / snippet）。

Default

Primary

Secondary

Gradient

Gradient reverse

Depth

Small

Default

Large

Primary round + animated

Download

Saving…

Disabled

<!-- Demo 1 -->
<template>
  <div class="demo-row">
    <AButton>Default</AButton>
    <AButton type="primary">Primary</AButton>
    <AButton type="secondary">Secondary</AButton>
    <AButton type="gradient">Gradient</AButton>
    <AButton type="gradient-reverse">Gradient reverse</AButton>
    <AButton type="depth">Depth</AButton>
  </div>
</template>

<!-- Demo 2 -->
<template>
  <div class="demo-row">
    <AButton size="small">Small</AButton>
    <AButton>Default</AButton>
    <AButton size="large">Large</AButton>
  </div>
</template>

<!-- Demo 3 -->
<template>
  <AButton type="primary" round anim fill>Primary round + animated</AButton>
</template>

<!-- Demo 4 -->
<template>
  <div class="demo-row">
    <AButton type="primary" icon="ri:download-line">Download</AButton>
    <AButton icon="ri:arrow-right-line" iconPosition="trailing">Next</AButton>
  </div>
</template>

<!-- Demo 5 -->
<template>
  <div class="demo-row">
    <AButton type="primary" loading>Saving…</AButton>
    <AButton disabled>Disabled</AButton>
  </div>
</template>