Button 按钮

用于触发操作，支持类型、尺寸、朴素、文字、圆形、加载、禁用、块级、自定义宽高和原生提交等常见按钮形态。

示例

基础用法

使用 type 设置按钮外观风格。

尺寸

使用 size 设置按钮尺寸，可选值为 small、normal、large。

朴素按钮

使用 plain 设置朴素按钮。

文字按钮

使用 text 设置文字按钮。

圆角与圆形

使用 round 设置圆角按钮，使用 circle 设置圆形按钮。

加载状态

使用 loading 设置加载状态，加载中按钮会同时进入不可点击状态。

禁用与块级

使用 disabled 禁用按钮，使用 block 设置块级按钮。

自定义宽高

使用 width 和 height 设置按钮宽高，数值会按组件库规则转换为视口单位，字符串可传入合法 CSS 尺寸值。

原生类型与点击事件

使用 native-type 设置原生 button 的 type，并通过 click 监听点击事件。

图标插槽

使用 icon 插槽自定义按钮前置图标；loading 为 true 且未传入 icon 插槽时，会显示默认加载图标。

暴露方法

通过组件实例调用 focus 和 blur 方法控制内部原生按钮焦点。

API

Props

属性名	说明	类型	默认值
type	按钮外观风格	'default' | 'primary' | 'error' | 'success' | 'noble'	'default'
size	按钮尺寸	'small' | 'normal' | 'large'	'normal'
width	按钮宽度	number | string	'auto'
height	按钮高度	number | string	'auto'
round	是否圆角按钮	boolean	false
circle	是否圆形按钮	boolean	false
loading	是否加载中	boolean	false
disabled	是否禁用	boolean	false
text	是否文字按钮	boolean	false
block	是否块级按钮	boolean	false
plain	是否朴素按钮	boolean	false
native-type	原生 button 的 type 属性	'button' | 'submit' | 'reset'	'button'

Events

事件名	说明	回调参数
click	点击时触发	(event: MouseEvent)

Slots

插槽名	说明	作用域参数
default	按钮内容	-
icon	按钮前置图标；传入后会覆盖加载状态的默认加载图标	-

Exposes

名称	说明	类型
ref	内部原生 button 元素引用	Ref<HTMLButtonElement | undefined>
focus	聚焦内部原生 button 元素	() => void
blur	取消聚焦内部原生 button 元素	() => void

注意事项

• loading 为 true 时按钮自动进入禁用状态，原生 button 也会被 disabled，点击不会触发 click 事件。
• width / height 接受数字或合法 CSS 值（如 '100px'、'50%'、'auto'、'30vw'）；数字会按设计视口宽度（1920px）自动转为 vw。
• 主要操作区域建议只保留一个主按钮，避免用户无法判断主操作。
• loading 常用于异步提交场景，同时建议配合业务禁用重复提交。
• 只有图标的圆形按钮建议配合可访问名称，避免仅靠图标传达关键操作。