# Button 按钮

常用的操作按钮。


## 基本用法

基础的按钮用法。


::: demo
```html
<template>
  <div>
    <el-row class="y-m-b-20">
      <y-button>默认按钮</y-button>
      <y-button type="primary">主要按钮</y-button>
      <y-button type="success">成功按钮</y-button>
      <y-button type="info">信息按钮</y-button>
      <y-button type="warning">警告按钮</y-button>
      <y-button type="danger">危险按钮</y-button>
    </el-row>
    <el-row class="y-m-b-20">
      <y-button plain>朴素按钮</y-button>
      <y-button type="primary" plain>主要按钮</y-button>
      <y-button type="success" plain>成功按钮</y-button>
      <y-button type="info" plain>信息按钮</y-button>
      <y-button type="warning" plain>警告按钮</y-button>
      <y-button type="danger" plain>危险按钮</y-button>
    </el-row>

    <el-row class="y-m-b-20">
      <y-button round>圆角按钮</y-button>
      <y-button type="primary" round>主要按钮</y-button>
      <y-button type="success" round>成功按钮</y-button>
      <y-button type="info" round>信息按钮</y-button>
      <y-button type="warning" round>警告按钮</y-button>
      <y-button type="danger" round>危险按钮</y-button>
    </el-row>

    <el-row class="y-m-b-20">
      <y-button icon="el-icon-search" circle></y-button>
      <y-button type="primary" icon="el-icon-edit" circle></y-button>
      <y-button type="success" icon="el-icon-check" circle></y-button>
      <y-button type="info" icon="el-icon-message" circle></y-button>
      <y-button type="warning" icon="el-icon-star-off" circle></y-button>
      <y-button type="danger" icon="el-icon-delete" circle></y-button>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>
<style></style>
```
:::

## 禁用状态

按钮不可用状态。

::: demo

```html
<template>
  <div>
    <el-row class="y-m-b-20">
      <y-button>默认按钮</y-button>
      <y-button disabled type="primary">主要按钮</y-button>
      <y-button disabled type="success">成功按钮</y-button>
      <y-button disabled type="info">信息按钮</y-button>
      <y-button disabled type="warning">警告按钮</y-button>
      <y-button disabled type="danger">危险按钮</y-button>
    </el-row>
    <el-row class="y-m-b-20">
      <y-button disabled plain>朴素按钮</y-button>
      <y-button disabled type="primary" plain>主要按钮</y-button>
      <y-button disabled type="success" plain>成功按钮</y-button>
      <y-button disabled type="info" plain>信息按钮</y-button>
      <y-button disabled type="warning" plain>警告按钮</y-button>
      <y-button disabled type="danger" plain>危险按钮</y-button>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>
<style></style>
```

:::

## 文字按钮

没有边框和背景色的按钮。

::: demo

```html
<template>
  <div>
    <y-button type="text">文字按钮</y-button>
    <y-button type="text" disabled>文字按钮</y-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>
<style></style>
```

:::

## 图标按钮

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。

::: demo

```html
<template>
  <div>
    <y-button type="primary" icon="el-icon-edit"></y-button>
    <y-button type="primary" icon="el-icon-share"></y-button>
    <y-button type="primary" icon="el-icon-delete"></y-button>
    <y-button type="primary" icon="el-icon-search">搜索</y-button>
    <y-button type="primary"
      >上传<i class="el-icon-upload el-icon--right"></i
    ></y-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>
<style></style>
```

:::

## 加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。

::: demo

```html
<template>
  <div>
    <y-button type="primary" :loading="true">加载中</y-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>
<style></style>
```

:::

## 不同尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

::: demo

```html
<template>
  <div>
    <el-row class="y-m-b-20">
      <el-button>默认按钮</el-button>
      <el-button size="medium">中等按钮</el-button>
      <el-button size="small">小型按钮</el-button>
      <el-button size="mini">超小按钮</el-button>
    </el-row>
    <el-row>
      <el-button round class="y-m-b-20">默认按钮</el-button>
      <el-button size="medium" round>中等按钮</el-button>
      <el-button size="small" round>小型按钮</el-button>
      <el-button size="mini" round>超小按钮</el-button>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {}
    }
  }
</script>
<style></style>
```

:::

## Attributes

| 参数        | 说明           | 类型    | 可选值                                   | 默认值 |
| ----------- | -------------- | ------- | ---------------------------------------- | ------ |
| size        | 尺寸           | string  | medium/small/mini                        | -      |
| type        | 类型           | string  | primary/success/warning/danger/info/text | -      |
| plain       | 是否朴素按钮   | boolean | -                                        | false  |
| round       | 是否圆角按钮   | boolean | -                                        | false  |
| circle      | 是否圆角按钮   | boolean | -                                        | false  |
| loading     | 是否加载中状态 | boolean | -                                        | false  |
| disabled    | 是否禁用状态   | boolean | -                                        | false  |
| icon        | 图标类名       | string  | -                                        | -      |
| autofocus   | 是否默认聚焦   | boolean | -                                        | false  |
| native-type | 原生 type 属性 | string  | button/submit/reset                      | button |