<script>
export default {
  props: {
    variant: {type: String, default: "primary"},
    type: {type: String, default: "fill"},
    text: {type: String, default: "Simpan"},
    size: {type: String, default: "md"},
    icon: {type: String, default: ""},
    align: {type: String, default: "ltr"},
    is_disabled: {type: Boolean, default: false},
    additional_class: {type: String, default: ""}
  },
  data: () => ({}),
  watch: {},
  methods: {
    passToParent() {
      this.$emit('click')
    }
  }
}
</script>

<template>
  <button @click="passToParent"
          :class="'text-uppercase shadows btn btn-' + variant + '-' + type + ' btn-'+size+ ' ' +additional_class"
          :disabled="is_disabled">
    <span v-if="align === 'ltr'"> {{ text }} <i v-if="icon" :class="icon"></i> </span>
    <span v-if="align === 'rtl' "> <i v-if="icon" :class="icon"></i> {{ text }}</span>
  </button>
</template>
