# ClButton Button

> 按钮组件，支持多种颜色主题、尺寸、loading 状态、图标和文字组合

- **标签名**: `<cl-button>`
- **引入**: `import { ClButton } from '@cldemo/library'`

## Props

| 参数 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `String` | `` | 否 | 自定义CSS类名 |
| label | `String` | `` | 否 | 按钮文本标签 |
| icon | `String` | `` | 否 | 按钮图标类名 |
| color | `String` | `'default'` | 否 | 按钮颜色主题，可选: default, green, red, yellow, white, grayLight, transparent |
| size | `String` | `` | 否 | 按钮尺寸，可选: large, small, xl |
| disabled | `Boolean` | `false` | 否 | 是否禁用按钮 |
| isShowLoad | `Boolean` | `false` | 否 | 是否显示加载动画 |
| loadPos | `String` | `'right'` | 否 | 加载动画位置，可选: right, zoom-out, fixedCenter |
| loadTheme | `String` | `'rotaryLine'` | 否 | 加载动画主题，可选: rotaryLine, circleNotch, circleBubble |
| loadDrift | `Boolean` | `true` | 否 | 加载时是否漂移 |
| loadText | `String` | `` | 否 | 加载提示文本 |
| isShowBackDrop | `Boolean` | `false` | 否 | 是否显示遮罩层 |
| isShowWaves | `Boolean` | `true` | 否 | 是否显示点击波纹效果 |
| wavesColor | `String` | `'white'` | 否 | 波纹颜色，可选: white, black |
| loadStatusIsIng | `Boolean, null` | `null` | 否 | 加载状态控制（true开始，false结束，null忽略） |

## Events

| 事件名 | 说明 |
|--------|------|
| onClick | 点击事件 |

## 方法

| 方法 | 说明 |
|------|------|
| loadStart() |  |
| loadStop() |  |

## 基础用法

```vue
<cl-button></cl-button>
```
