# Button 按钮
---
按钮用于及时操作，响应用户操作行为，触发相应的业务逻辑。
### 基础用法


<div class="demo-block k-button-dynamicBtn">
    <y-button type="default">主要按钮</y-button>
    <y-button type="assist">辅助按钮</y-button>
    <y-button type="support">辅助按钮</y-button>
    <y-button type="spirit">幽灵按钮</y-button>
    <y-button type="gray">撤消按钮</y-button>
    <y-button type="danger">警示按钮</y-button>
</div>

<script>
export default{
  data(){
    return {
      type:1
    }
  },
  methods:{
    showLarge: function(){
    	this.type=1;
    },
    showSmall: function(){
    	this.type=2;
    },
    showMedium: function(){
    	this.type=3;
    },
    showMini: function(){
    	this.type=4;
    }
  }
}
</script>

::: demo

```html
<div>
    <y-button type="default">主要按钮</y-button>
    <y-button type="assist">辅助按钮</y-button>
    <y-button type="support">辅助按钮</y-button>
    <y-button type="spirit">幽灵按钮</y-button>
    <y-button type="gray">撤消按钮</y-button>
    <y-button type="danger">警示按钮</y-button>
</div>
```
:::


### 禁用用法
通过添加 ```disabled```属性可将按钮设置为不可用状态
<div class="demo-block k-button-dynamicBtn">
    <y-button disabled type="default">主要按钮</y-button>
    <y-button disabled type="assist">辅助按钮</y-button>
    <y-button disabled type="support">辅助按钮</y-button>
    <y-button disabled type="spirit">幽灵按钮</y-button>
    <y-button disabled type="gray">撤消按钮</y-button>
    <y-button disabled type="danger">警示按钮</y-button>
</div>

::: demo
```html
<div>
    <y-button disabled type="default">主要按钮</y-button>
    <y-button disabled type="assist">辅助按钮</y-button>
    <y-button disabled type="spirit">幽灵按钮</y-button>
    <y-button disabled type="gray">撤消按钮</y-button>
    <y-button disabled type="danger">警示按钮</y-button>
</div>
```
:::

<div class="demo-block k-button-dynamicLink">
    <y-button type="graylink">文字按钮</y-button>
    <y-button type="link">文字按钮</y-button>
    <y-button type="dangerlink">文字按钮</y-button>
</div>

::: demo
```html
<div class="demo-block">
    <y-button type="graylink">文字按钮</y-button>
    <y-button type="link">文字按钮</y-button>
    <y-button type="dangerlink">文字按钮</y-button>
</div>
```
:::

<div class="demo-block k-button-dynamicLink">
    <y-button disabled type="graylink">文字按钮</y-button>
    <y-button disabled type="link">文字按钮</y-button>
    <y-button disabled type="dangerlink">文字按钮</y-button>
</div>

::: demo
```html
<div class="demo-block">
    <y-button disabled type="graylink">文字按钮</y-button>
    <y-button disabled type="link">文字按钮</y-button>
    <y-button disabled type="dangerlink">文字按钮</y-button>
</div>
```
:::

### 图标按钮

<div class="demo-block k-button-dynamicIcon">
    <y-button type="default" icon="icon-add"></y-button>
    <y-button type="default" icon="icon-add">按钮元素</y-button>
    <y-button type="link" icon="icon-button_delete">按钮元素</y-button>
</div>

::: demo
```html
<div>
    <y-button type="default" icon="icon-add"></y-button>
    <y-button type="gray" icon="icon-reduce"></y-button>
    <y-button type="link" icon="icon-button_delete">按钮元素</y-button>
</div>
```
:::

### 图标按钮禁用状态

<div class="demo-block k-button-dynamicIcon">
    <y-button type="default" icon="icon-add" disabled></y-button>
    <y-button type="default" icon="icon-add" disabled>按钮元素</y-button>
    <y-button type="link" icon="icon-button_delete" disabled>按钮元素</y-button>
</div>

::: demo
```html
<div>
    <y-button type="default" icon="icon-add" disabled></y-button>
    <y-button type="gray" icon="icon-reduce" disabled></y-button>
    <y-button type="default" icon="icon-add" disabled>按钮元素</y-button>
</div>
```
:::

### 尺寸大小

<div class="demo-block">
	<div class="bmgz">
		<y-radio-group value="0">
		    <y-radio-button @click="showLarge" label="0" type="plain">Large</y-radio-button>
		    <y-radio-button @click="showSmall" label="1" type="plain">Small</y-radio-button>
		    <y-radio-button @click="showMedium" label="2" type="plain">Medium</y-radio-button>
		    <y-radio-button @click="showMini" label="3" type="plain">Mini</y-radio-button>
		</y-radio-group>
	</div>
	<br>
	<div class="k-button-dynamicSize">
		<div v-if="this.type==1">
		    <y-button type="default" large>主要按钮</y-button>
		    <y-button type="assist" large>辅助按钮</y-button>
		    <y-button type="support" large>辅助按钮</y-button>
		    <y-button type="spirit" large>幽灵按钮</y-button>
		    <y-button type="gray" large>撤消按钮</y-button>
		    <y-button type="danger" large>警示按钮</y-button>
		</div>
		<div v-if="this.type==2">
		    <y-button type="default" small>主要按钮</y-button>
		    <y-button type="assist" small>辅助按钮</y-button>
		    <y-button type="support" small>辅助按钮</y-button>
		    <y-button type="spirit" small>幽灵按钮</y-button>
		    <y-button type="gray" small>撤消按钮</y-button>
		    <y-button type="danger" small>警示按钮</y-button>
	   </div>
	    <div v-if="this.type==3">
		    <y-button type="default" medium>主要按钮</y-button>
		    <y-button type="assist" medium>辅助按钮</y-button>
		    <y-button type="support" medium>辅助按钮</y-button>
		    <y-button type="spirit" medium>幽灵按钮</y-button>
		    <y-button type="gray" medium>撤消按钮</y-button>
		    <y-button type="danger" medium>警示按钮</y-button>
	    </div>
	    <div v-if="this.type==4">
		    <y-button type="default" mini>主要按钮</y-button>
		    <y-button type="assist" mini>辅助按钮</y-button>
		    <y-button type="support" mini>辅助按钮</y-button>
		    <y-button type="spirit" mini>幽灵按钮</y-button>
		    <y-button type="gray" mini>撤消按钮</y-button>
		    <y-button type="danger" mini>警示按钮</y-button>
	    </div>
	</div>
</div>

::: demo

```html
<div class="demo-block">
    <y-button type="default" large>主要按钮</y-button>
    <y-button type="assist" large>辅助按钮</y-button>
    <y-button type="spirit" large>幽灵按钮</y-button>
    <y-button type="gray" large>撤消按钮</y-button>
    <y-button type="danger" large>警示按钮</y-button>
    <br>
    <br>
    <y-button type="default" small>主要按钮</y-button>
    <y-button type="assist" small>辅助按钮</y-button>
    <y-button type="spirit" small>幽灵按钮</y-button>
    <y-button type="gray" small>撤消按钮</y-button>
    <y-button type="danger" small>警示按钮</y-button>
    <br>
    <br>
    <y-button type="default" medium>主要按钮</y-button>
    <y-button type="assist" medium>辅助按钮</y-button>
    <y-button type="spirit" medium>幽灵按钮</y-button>
    <y-button type="gray" medium>撤消按钮</y-button>
    <y-button type="danger" medium>警示按钮</y-button>
    <br>
    <br>
    <y-button type="default" mini>主要按钮</y-button>
    <y-button type="assist" mini>辅助按钮</y-button>
    <y-button type="spirit" mini>幽灵按钮</y-button>
    <y-button type="gray" mini>撤消按钮</y-button>
    <y-button type="danger" mini>警示按钮</y-button>
</div>
```
:::

### y-button 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| type      | 类型     | string    |  default,gray,link,danger |  —  |
| disabled  | 是否禁用 | boolean   |    true/false    | false   |
| icon      | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
| medium      | 中等尺寸按钮 | boolean   |  true/false  |  false  |
| mini      | 小尺寸按钮 | boolean   | true/false  |  false  |