# Button 组件

按钮，一般用于点击触发一个定义的操作

## 使用说明

我们提供了 5 种类型的按钮：

- 默认按钮：进行主要的操作
- 幽灵按钮：用于背景色复杂的的地方，一般做辅助操作
- 虚线按钮：一般用于次要的操作
- 禁用按钮：表示按钮不可操作
- 链接按钮：一般用于外链

## 示例

5 种不同的 button
::: demo

```html
<template>
  <div class="box-vue">
    <s-button>Default</s-button>
    <s-button ghost type="primary">Ghost Primary</s-button>
    <s-button dashed>Dashed</s-button>
    <s-button disabled>Disabled</s-button>
    <s-button link>Link</s-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {};
    }
  };
</script>
```
:::

不同的主按钮样式
::: demo

```html
<template>
  <div class="box-vue">
    <s-button>Default</s-button>
    <s-button type="primary">Primary</s-button>
    <s-button type="error">Error</s-button>
    <s-button type="error" circle>Circle</s-button>
    <s-button type="primary" circle block style="margin-top: 10px">Block Circle</s-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {};
    }
  };
</script>
```
:::

2 种嵌入 icon 的形式（icon 大小颜色和 button 字体大小一致）
::: demo

```html
<template>
  <div class="box-vue">
    <s-button icon="remind">Default</s-button>
    <s-button icon="close" disabled>disabled</s-button>
    <s-button type="primary">Primary<s-icon icon="arrow-down"/></s-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {};
    }
  };
</script>
```

:::

## API

| 参数     | 说明                                    | 类型    | 默认值 | 可选值          |
| -------- | --------------------------------------- | ------- | ------ | --------------- |
| type     | 设置按钮样式类型                        | array   | -      | -/primary/error |
| icon     | 设置按钮内嵌 icon，会默认使用 icon 组件 | string  | -      | 参考 icon 组件  |
| ghost    | 设置按钮为幽灵模式                      | boolean | false  | true/false      |
| dashed   | 设置按钮为虚线模式                      | boolean | false  | true/false      |
| disabled | 设置按钮为禁用模式                      | boolean | false  | true/false      |
| link     | 设置按钮为链接模式                      | boolean | false  | true/false      |
| circle   | 设置按钮为圆角                          | boolean | false  | true/false      |
| block    | 设置按钮为 block 模式（100%宽度）       | boolean | false  | true/false      |
| @click   | 绑定 click 事件                         | event   | -      | -               |