diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index 90095eef9..c373fedbc 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -1,6 +1,7 @@
 <template>
-  <button
-    type="button"
+  <component
+    :is="to === null ? 'button' : httpLink ? 'a' : 'router-link'"
+    v-bind="btnAttrs"
     class="relative flex items-center py-1 px-2 rounded-md border shadow-sm cursor-pointer transition-all duration-150 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
     :class="{
       'bg-wp-control-neutral-100 hover:bg-wp-control-neutral-200 border-wp-control-neutral-300 text-wp-text-100':
@@ -12,7 +13,6 @@
     }"
     :title="title"
     :disabled="disabled"
-    @click="doClick"
   >
     <slot>
       <Icon v-if="startIcon" :name="startIcon" class="!w-6 !h-6" :class="{ invisible: isLoading, 'mr-1': text }" />
@@ -32,12 +32,12 @@
         <Icon name="loading" class="animate-spin" />
       </div>
     </slot>
-  </button>
+  </component>
 </template>
 
 <script lang="ts" setup>
 import { computed, useAttrs } from 'vue';
-import { RouteLocationRaw, useRouter } from 'vue-router';
+import { RouteLocationRaw } from 'vue-router';
 
 import Icon, { IconNames } from '~/components/atomic/Icon.vue';
 
@@ -62,24 +62,19 @@ const props = withDefaults(
   },
 );
 
-const router = useRouter();
+const httpLink = computed(() => typeof props.to === 'string' && props.to.startsWith('http'));
 
-async function doClick() {
-  if (props.isLoading) {
-    return;
+const btnAttrs = computed(() => {
+  if (props.to === null) {
+    return { type: 'button' };
   }
 
-  if (!props.to) {
-    return;
+  if (httpLink.value) {
+    return { href: props.to };
   }
 
-  if (typeof props.to === 'string' && props.to.startsWith('http')) {
-    window.location.href = props.to;
-    return;
-  }
-
-  await router.push(props.to);
-}
+  return { to: props.to };
+});
 
 const attrs = useAttrs();
 const passedClasses = computed(() => {