diff --git a/client/src/components/Common/AsyncButton.vue b/client/src/components/Common/AsyncButton.vue
index 1c8ea86c0a88..efff4b401266 100644
--- a/client/src/components/Common/AsyncButton.vue
+++ b/client/src/components/Common/AsyncButton.vue
@@ -10,7 +10,18 @@ interface Props {
     loadingTitle?: string;
     size?: "sm" | "md" | "lg";
     action: () => Promise<void>;
-    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link";
+
+    variant?:
+        | "outline-primary"
+        | "primary"
+        | "secondary"
+        | "success"
+        | "danger"
+        | "warning"
+        | "info"
+        | "light"
+        | "dark"
+        | "link";
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/client/src/components/Workflow/WorkflowCard.vue b/client/src/components/Workflow/WorkflowCard.vue
index b27ae0465e18..9618a01132f5 100644
--- a/client/src/components/Workflow/WorkflowCard.vue
+++ b/client/src/components/Workflow/WorkflowCard.vue
@@ -10,6 +10,7 @@ import { copyWorkflow, updateWorkflow } from "@/components/Workflow/workflows.se
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 
+import AsyncButton from "@/components/Common/AsyncButton.vue";
 import TextSummary from "@/components/Common/TextSummary.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import WorkflowActions from "@/components/Workflow/WorkflowActions.vue";
@@ -183,16 +184,16 @@ async function onTagClick(tag: string) {
                             Edit
                         </BButton>
 
-                        <BButton
+                        <AsyncButton
                             v-else
                             v-b-tooltip.hover
                             size="sm"
                             title="Import this workflow to edit"
+                            :icon="faUpload"
                             variant="outline-primary"
-                            @click="onImport">
-                            <FontAwesomeIcon :icon="faUpload" />
+                            :action="onImport">
                             Import
-                        </BButton>
+                        </AsyncButton>
 
                         <WorkflowRunButton :id="workflow.id" />
                     </div>