Button 按钮

常用的操作按钮，支持多种视觉样式、尺寸、危险态、异步自动加载和图标插槽，适用于表单提交、列表操作与页面内交互触发。

基础用法

通过 type 设置按钮的视觉风格。primary 用于主操作，default 适合常规动作，dashed、text、link 适合弱化操作。

尺寸与形态

按钮提供 large、default、small 三种尺寸，同时支持 round 和 circle 两种形态。

按钮尺寸

圆角与圆形

危险 / 禁用

danger 用于表达删除、拒绝等高风险操作；disabled 用于禁止点击和状态变化。

受控加载

当业务侧需要完全控制加载过程时，可通过 loading 属性驱动按钮状态。

自动加载与点击事件

action 返回 Promise 时，按钮会自动进入加载态；同时仍会按组件约定触发 click 事件，适合直接承载异步提交动作。

块级 / 省略

block 让按钮占满父容器宽度，ellipsis 适用于固定宽度下的长文本省略场景。

图标插槽

通过 icon 插槽可以插入前置图标，也可以结合 circle 创建纯图标按钮。

接口说明

属性

名称	类型	默认值	说明
type	'primary' | 'default' | 'dashed' | 'text' | 'link'	'default'	按钮视觉类型。
size	'large' | 'default' | 'small'	'default'	按钮尺寸。
disabled	boolean	false	是否禁用按钮，禁用后不会触发点击。
loading	boolean	false	是否启用受控加载状态。
danger	boolean	false	是否使用危险态样式。
block	boolean	false	是否撑满父容器宽度。
round	boolean	false	是否显示为胶囊圆角按钮。
circle	boolean	false	是否显示为圆形按钮。
autofocus	boolean	false	是否在挂载后自动聚焦原生按钮。
ellipsis	boolean	false	是否在文本溢出时显示省略号，并同步完整标题到 title。
ripple	boolean	true	是否启用按下时的波纹特效。
action	(event: MouseEvent) => void | Promise<unknown>	undefined	属性级点击处理函数，返回 Promise 时自动进入加载态。

事件

名称	类型	默认值	说明
click	(event: MouseEvent) => void	-	按钮可交互时触发的点击事件；禁用和加载中不会触发。

插槽

名称	类型	默认值	说明
default	() => VNode[]	-	按钮主内容。
icon	() => VNode[]	-	前置图标内容，加载中不显示。

暴露方法

名称	类型	默认值	说明
focus	() => void	-	使原生按钮获得焦点。
blur	() => void	-	使原生按钮失去焦点。
ref	HTMLButtonElement | undefined	-	暴露的原生 button 元素引用。