みんな大好きボタンコンポーネントについて

<template>
  <button class="my-button" :class="[type, size]" @click="click">
    <slot />
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "",
    },
  },
  methods: {
    click() {
      this.$emit("myclick");
    },
  },
};
</script>

<style>
.my-button {
  background: #f6f6f6;
  border: none;
  border-radius: 3px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
  color: #666;
  cursor: pointer;
  font-size: 14px;
  margin: 2px 5px;
  outline: none;
  padding: 10px 20px;
  transition: opacity 0.4s;
}
.my-button:hover {
  opacity: 0.8;
}
.my-button:active {
  transform: translateY(3px);
  box-shadow: none;
}
.my-button.primary {
  background: #2980b9;
  color: #ffffff;
}
.my-button.success {
  background: #2ecc71;
  color: #ffffff;
}
.my-button.info {
  background: #3498db;
  color: #ffffff;
}
.my-button.warning {
  background: #f1c40f;
  color: #ffffff;
}
.my-button.danger {
  background: #e74c3c;
  color: #ffffff;
}
.my-button.small {
  font-size: 10px;
  padding: 5px 10px;
}
.my-button.large {
  font-size: 18px;
  padding: 15px 30px;
}
</style>

<template>
  <div id="app">
    <div>
      <h2>Type</h2>
      <my-button>Default</my-button>
      <my-button type="primary">Primary</my-button>
      <my-button type="success">Success</my-button>
      <my-button type="info">Info</my-button>
      <my-button type="warning">Warning</my-button>
      <my-button type="danger">Danger</my-button>
    </div>
    <div>
      <h2>Size</h2>
      <my-button size="small">Small</my-button>
      <my-button>Default</my-button>
      <my-button size="large">Large</my-button>
    </div>
    <div>
      <h2>Click Event</h2>
      <my-button @myclick="click">Click Me!</my-button>
      <p>count: {{count}}</p>
    </div>
  </div>
</template>

<script>
import MyButton from "./components/MyButton.vue";

export default {
  name: "App",
  components: {
    MyButton
  },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    click() {
      this.count++;
    }
  }
};
</script>

<style>
#app {
}
</style>