<script>
export default {
  props: {
    variant: {type: String, default: "primary"},
    type: {type: String, default: "fill"},
    text: {type: String, default: "Loading"},
    size: {type: String, default: "md"},
    align: {type: String, default: "ltr"},
    additional_class: {type: String, default: ""}
  },
  data: () => ({}),
  watch: {},
  methods: {}
}
</script>

<template>
  <button :class="'text-uppercase shadows btn btn-' + variant + '-' + type + ' btn-'+ size + ' ' +additional_class  "
          disabled>
    <span v-if="align === 'ltr'">
      {{ text }}
      <div class="spinner-border ml-2" role="status" aria-hidden="true" style="height: 15px;width: 15px"></div>
    </span>
    <span v-if="align === 'rtl'">
      <div class="spinner-border ml-2" role="status" aria-hidden="true" style="height: 15px;width: 15px"></div>
      {{ text }}
    </span>
  </button>
</template>
