<template>
  <button
    class="h-button"
    @click="handleClick"
    :disabled="disabled || loading"
    :class="[
      type ? 'h-button--' + type : '',
      size ? 'h-button--' + size : '',
      {
        'is-disabled': disabled,
        'is-loading': loading
      }
    ]"
  >
    <i class="h-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: "HButton",
  props: {
    size: String,
    type: String,
    icon: {
      type: String,
      default: ""
    },
    loading: Boolean,
    disabled: Boolean
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    }
  }
};
</script>
