Button Props

名称	类型	默认值	说明
label	string	必需	操作名称，同时作为按钮的无障碍名称。没有默认插槽时，它就是按钮上可见的文字。
variant	'primary' | 'secondary' | 'ghost' | 'destructive'	'secondary'	按钮的外观风格，用来表达操作的强调程度与类型。
size	'sm' | 'md' | 'lg'	'md'	按钮尺寸，决定点击区域的大小。
elevation	'none' | 'low' | 'med' | 'high'	'none'	独立浮动按钮的静止阴影深度；放入 ButtonGroup 后由组统一控制。
type	'button' | 'submit' | 'reset'	'button'	原生 button 元素的类型，常用于表单内的提交与重置。
name	string	—	表单提交时携带的名称。
value	string | number | readonly string[]	—	表单提交时随名称一并提交的值。
form	string	—	要关联的表单 ID。
isDisabled	boolean	false	是否禁用，禁用后不再响应交互。存在 tooltip 时改用 aria-disabled，让按钮保留焦点。
isLoading	boolean	false	是否显示加载状态：展示加载图标并设置 aria-busy，同时默认阻止重复操作。
isInterruptible	boolean	false	加载期间是否允许再次触发 clickAction。
clickAction	(event: MouseEvent) => void | Promise<void>	—	点击时执行的动作。返回 Promise 时，组件自动进入并退出加载状态。
isIconOnly	boolean	false	是否只显示 icon 插槽的内容，操作名称仍由 label 提供给辅助技术。
width	number | string	—	按钮宽度。数字按像素处理，CSS 字符串按原样使用。
loadingLabel	string	'Loading'	加载文字，用于加载图标与实时区域，建议按应用语言本地化。
tooltip	string	—	补充提示，悬停或键盘聚焦时显示。
href	string	—	存在且未禁用时，根元素渲染为链接。
as	string | Component	'a'	href 模式下使用的自定义 Vue 链接组件，可同时接收 href 和 to。
target	string	—	链接的浏览上下文，如 _blank。
rel	string	—	链接的关系属性。

异步操作

clickAction 让组件感知异步流程：

• @click 始终先于 clickAction 触发。
• 在 @click 中调用 event.preventDefault() 时，组件会跳过 clickAction，适合用它拦截操作。
• clickAction 返回 Promise 时，组件立即进入加载状态。
• Promise 成功或失败后，组件自动清除加载状态。
• 错误处理交给应用：clickAction 中产生的异常需要由应用自行捕获。

重复触发

• isInterruptible 默认为 false，加载期间的再次点击会被忽略。
• 设为 true 后，加载期间可以继续触发，多个操作并行执行。
• 组件不会取消之前尚未完成的 Promise；如果需要取消旧请求，请在应用侧调用 AbortController.abort()。

Button 插槽

名称	说明
default	可选的默认内容，用来覆盖 label 渲染的可见文字；无障碍名称仍由 label 提供。
icon	渲染在标签前的装饰图标。
end	渲染在标签后的徽标、图标等简短装饰内容，纯图标模式下不显示。

Button 事件

名称	载荷	说明
click	MouseEvent	可取消的点击事件。按钮处于禁用状态，或加载期间阻止重复操作时，不会触发。

模板引用

Button 公开 element。 类型为 HTMLButtonElement | HTMLAnchorElement | HTMLElement | null。

原生属性

以下内容传入根元素：

• HTML 属性。
• aria-* 属性。
• data-* 属性。
• class。
• style。
• 原生事件监听器。