Add loading prop to button

frontend/components/global/Button.vue

@@ -6,14 +6,16 @@ type Props = {
     startIcon?: string;
     endIcon?: string;
     loading?: boolean;
+    disabled?: boolean;
 };
 
 // props
 const props = withDefaults(defineProps<Props>(), {
     variant: "solid",
     size: "lg",
+    disabled: false,
 });
-const { variant, size, loading } = toRefs(props);
+const { variant, size, loading, disabled } = toRefs(props);
 
 // computed
 const classes = computed(() => {
@@ -32,17 +34,30 @@ const classes = computed(() => {
             "btn-md": size.value === "md",
         },
         {
-            "pointer-events-none opacity-80 cursor-not-allowed": loading.value,
+            "pointer-events-none cursor-not-allowed": loading.value || disabled.value,
         },
     ];
 });
 </script>
 
 <template>
-    <button :class="classes" :disabled="loading">
+    <button
-        <Icon v-if="!loading && startIcon" :name="startIcon" />
+        :class="classes"
+        :disabled="loading || disabled"
+    >
+        <Icon
+            v-if="!loading && startIcon"
+            :name="startIcon"
+        />
         <slot v-if="!loading" />
-        <Icon v-if="!loading && endIcon" :name="endIcon" />
+        <Icon
-        <Icon v-if="loading" name="ci:svg-spinners-3-dots-fade" class="my-0.5" />
+            v-if="!loading && endIcon"
+            :name="endIcon"
+        />
+        <Icon
+            v-if="loading"
+            name="ci:svg-spinners-3-dots-fade"
+            class="my-0.5"
+        />
     </button>
 </template>