From 83b368102d7448d1db228fcaae8329b96eb7de3b Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sat, 2 May 2026 12:27:53 +0330
Subject: [PATCH] Add loading prop to button

---
 frontend/components/global/Button.vue | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/components/global/Button.vue b/frontend/components/global/Button.vue
index 943bd15..6c6ca67 100644
--- a/frontend/components/global/Button.vue
+++ b/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">
-        <Icon v-if="!loading && startIcon" :name="startIcon" />
+    <button
+        :class="classes"
+        :disabled="loading || disabled"
+    >
+        <Icon
+            v-if="!loading && startIcon"
+            :name="startIcon"
+        />
         <slot v-if="!loading" />
-        <Icon v-if="!loading && endIcon" :name="endIcon" />
-        <Icon v-if="loading" name="ci:svg-spinners-3-dots-fade" class="my-0.5" />
+        <Icon
+            v-if="!loading && endIcon"
+            :name="endIcon"
+        />
+        <Icon
+            v-if="loading"
+            name="ci:svg-spinners-3-dots-fade"
+            class="my-0.5"
+        />
     </button>
 </template>