Button 按钮

按钮组件，用于触发操作或提交表单。

何时使用：当用户需要执行一个动作（提交表单、打开弹窗、删除数据）时使用。页面跳转请使用 Link。

基础用法

带图标

通过 #icon 插槽或 icon prop 添加图标。

加载状态

禁用状态

块级按钮

尺寸

三档尺寸取自同一套令牌，实测高度约为 md 37px（默认）/ sm 25px / lg 49px；与同库默认尺寸的 Input 39px、Badge 37px 同量级（Input 多 2px 是其 1px 上下边框）。控件已显式声明行高，高度不随宿主 body 行高漂移。默认档与 lg 档均满足 WCAG 2.5.8（AA）24px 最小触控目标；sm 档贴近该下限，建议仅用于表格行内等紧凑场景。

颜色变体

视觉变体

组合使用

---

API

Props

属性名	类型	默认值	说明
label	string	''	按钮文字
variant	'filled' | 'outline'	'filled'	视觉变体
color	'primary' | 'success' | 'warning' | 'error'	'primary'	主题色
size	'sm' | 'md' | 'lg'	'md'	按钮尺寸
type	'button' | 'submit' | 'reset'	'button'	原生按钮类型（默认 button 防止表单意外提交）
disabled	boolean	false	是否禁用
loading	boolean	false	是否加载中
block	boolean	false	是否为块级（宽度 100%）
icon	string | Component	—	图标（字符串或 Vue 组件）
showLabelWhileLoading	boolean	false	加载时是否保留文字（默认只显示加载动画）
loadingLabel	string	—	加载时的自定义文字（默认复用 label）

Slots

名称	说明
default	按钮文字（优先级高于 label prop）
icon	左侧图标内容（优先级高于 icon prop）
loading-label	加载状态文字（优先级高于 loadingLabel prop）

Events

事件	参数	说明
click	(event: MouseEvent)	点击回调（禁用或加载时不会触发）

---

注意事项

• label prop 与默认插槽同时存在时，默认插槽优先
• icon prop 与 #icon 插槽同时存在时，插槽优先
• loading 状态下：
  • 按钮自动禁用，click 事件不会触发
  • 默认只显示加载动画，文字和图标均被隐藏
  • 如需在加载时保留文字，可设置 showLabelWhileLoading 为 true
  • 如需自定义加载时的文字，可设置 loadingLabel（例如 "提交中..."）
• icon prop 支持传入 Vue 组件（如 :icon="IconHome"）或字符串（如 icon="✓"）
• 尺寸与触控目标：默认 md 档约 37px 高，满足 WCAG 2.5.8（AA，最小 24px）；lg 档约 49px 达到 44px 建议值，sm 档约 25px 贴近 24px 下限，仅建议用于表格行内等紧凑场景
• 按钮高度不依赖宿主页面的 body 行高：.mg-button 显式声明 line-height: 1.4，因此接入任何项目（含像 VitePress 那样设置全局行高的站点）三档高度都保持一致