<template>
  <div class="demo-button-disabled">
    <ui-button type="primary">
      Primary
    </ui-button>
    <ui-button
      disabled
      type="primary">
      Primary(Disabled)
    </ui-button>
    <br />
    <ui-button>
      Default
    </ui-button>
    <ui-button disabled>
      Default(Disabled)
    </ui-button>
    <br />
    <ui-button type="danger">
      Danger
    </ui-button>
    <ui-button
      type="danger"
      disabled>
      Danger(Disabled)
    </ui-button>
    <br />
    <ui-button type="text">
      Text
    </ui-button>
    <ui-button
      type="text"
      disabled>
      Text(Disabled)
    </ui-button>

    <div class="ghost-buttons">
      <ui-button ghost>
        Ghost
      </ui-button>
      <ui-button
        ghost
        disabled>
        Ghost(Disabled)
      </ui-button>
    </div>
  </div>
</template>
<script>
import { Button } from "amumu-ui"
export default {
  components: {
    "ui-button": Button,
  },
}
</script>
<style lang="scss">
.demo-button-disabled {
  .mm-button {
    margin: 0 20px 20px 0;
  }
  .ghost-buttons {
    background: #d0d7d8;
    padding: 10px;
    .mm-button {
      margin-bottom: 0;
    }
  }
}
</style>
