---
url: /components/button.md
---
# Button 按钮

常用的操作按钮：default / primary / success / warning / danger / info 六种语义类型，支持 plain / round / circle / text / link / ghost / loading 等形态，图标颜色自动跟随按钮文字色（primary 按钮内图标呈白色）。disabled 与 loading 状态下点击不触发 click 事件；loading 时前导图标被替换为旋转图标并锁定宽度避免抖动。

## 基础用法

`type` 决定语义色，缺省为 default。

## 朴素 / 圆角 / 圆形

`plain` 朴素底色，`round` 全圆角，`circle` 圆形（常与纯图标搭配）。

## 图标

`icon` 传 registry 图标名（或图标组件），图标颜色随按钮文字色自动变化：实心类型内为白色，plain / default 内为主题色或常规色。

## 禁用与加载

`disabled` 禁用点击，`loading` 展示旋转图标并同样阻断点击；loading 时插槽内的前导图标会被自动移除，避免双图标并列。

## 点击触发加载

loading 通常由异步请求驱动：点击后置 true，请求结束置 false，期间按钮不可重复点击。

## 尺寸

`size` 控制高度与内边距，图标字号随之缩放（large 16px / default 14px / small 12px）。

## 文字与链接按钮

`text` 无底色文字按钮（适合表格操作列），`link` 链接样式按钮；两者均可叠加 type 语义色与 icon。

## 幽灵与危险实心

`ghost` 幽灵按钮透明底（适合深色背景），`danger-solid` 让 danger 按钮红色更实，用于强危险操作。

## 按钮组

`eb-button-group` 包裹的按钮连为一个整体（相邻边框合并、圆角只保留首尾）。成对出现的操作（如上一页 / 下一页）建议图标朝外：默认 `icon-position="left"`，第二枚按钮传 `icon-position="right"` 让图标落到文本右侧。

## API