### XButton 按钮

::: 默认样式

```html
<div class="demo-block" id="x-button-demo1">
   <lx-x-button>submit</lx-x-button>
    <lx-x-button type="primary">
      primary
    </lx-x-button>
    <lx-x-button type="warn">
      Delete
    </lx-x-button>
</div>

<script>
// 按钮.md
  new Vue({
    el: '#x-button-demo1',
  })
</script>
```
::: 小按钮

```html
<div class="demo-block" id="x-button-demo2">
  <lx-x-button mini>
    submit
  </lx-x-button>
  <lx-x-button
    mini
    type="primary"
  >
    primary
  </lx-x-button>
  <lx-x-button
    mini
    type="warn"
  >
    Delete
  </lx-x-button>
  <br>
  <lx-x-button
    mini
    plain
  >
    submit
  </lx-x-button>
  <lx-x-button
    mini
    plain
    type="primary"
  >
    primary
  </lx-x-button>
</div>

<script>
  new Vue({
    el: '#x-button-demo2',
  })
</script>
```

::: plain
```html
<div class="demo-block" id="x-button-demo3">
  <lx-x-button plain>
    submit
  </lx-x-button>
  <lx-x-button
    plain
    type="primary"
  >
    primary
  </lx-x-button>
</div>

<script>
  new Vue({
    el: '#x-button-demo3',
  })
</script>
```

::: disabled

```html
<div class="demo-block" id="x-button-demo4">
  <lx-x-button disabled>
    disable submit
  </lx-x-button>
  <lx-x-button
    type="primary"
    disabled
  >
    disable primary
  </lx-x-button>
  <lx-x-button
    type="warn"
    disabled
  >
    disable Delete
  </lx-x-button>
</div>

<script>
  new Vue({
    el: '#x-button-demo4',
  })
</script>
```

::: 使用text属性和disable属性

```html
<div class="demo-block" id="x-button-demo5">
  <lx-x-button
    :text="submit001"
    :disabled="disable001"
    type="primary"
    @click="processButton001"
  />
</div>

<script>
  new Vue({
    el: '#x-button-demo5',
    data: {
      submit001: 'click me',
      disable001: false
    },
    methods: {
      processButton001() {
        this.submit001 = 'processing'
        this.disable001 = true
      }
    }
  })
</script>
```