improved vue component

src/components/actionButton.vue

@@ -1,18 +1,11 @@
 <template>
-  <div v-bind:class="className">
+  <button ref="button" :class="className" v-if="loading ^ 1" @click.prevent="handler">
-    <button class="btn btn-primary" v-if="loading ^ 1" @click.prevent="handler">
+    <slot>Download</slot>
-      <slot>Download</slot>
+  </button>
-    </button>
+  <button class="bs-spinner" v-if="loading">
-    <button class="bs-spinner" v-if="loading">
+    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" disabled></span><span
-      <span
+      class="visually-hidden">Loading...</span>
-        class="spinner-border spinner-border-sm"
+  </button>
-        role="status"
-        aria-hidden="true"
-        disabled
-      ></span
-      ><span class="visually-hidden">Loading...</span>
-    </button>
-  </div>
 </template>
 <script>
 export default {
@@ -30,46 +23,26 @@ export default {
   name: "actionButton",
   props: {
     className: String,
-    enableLoading: Boolean,
+    enableLoading: {
+      type: Boolean,
+      default: false,
+    },
+    btnType: {
+      type: String,
+      default: "",
+    },
+    action: {
+      type: String,
+      default: "",
+    },
   },
 };
 </script>
 <style lang="scss">
-@import "../css/variables.scss";
+@import "../css/bootstrap.scss";
-button {
+@import "../css/btn.scss";
-  cursor: pointer;
-  border-radius: 0px;
-}
-.btn {
-  display: inline-block;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #212529;
-  text-align: center;
-  text-decoration: none;
-  vertical-align: middle;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 1px solid transparent;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
 
-.btn-primary {
+.check-button {
-  color: #fff;
+  @extend .btn;
-  background-color: #7d7f7d;
-  border-color: #7d7f7d;
-}
-
-.btn-primary:hover {
-  color: #fff;
-  background-color: #0b5ed7;
-  border-color: #0a58ca;
 }
 </style>