diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index d8ee02b41a..4696badb14 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
-	import { goto } from '$app/navigation'
 	import { classNames } from '$lib/utils'
 	import Icon from 'svelte-awesome'
 	import { ButtonType } from './model'
@@ -45,6 +44,7 @@
 	}
 
 	$: buttonProps = {
+		id,
 		class: classNames(
 			colorVariants[color][variant],
 			variant === 'border' ? 'border' : '',
@@ -63,9 +63,9 @@
 	}
 
 	function onClick(event: MouseEvent) {
+		event.preventDefault()
 		dispatch('click', event)
 		if (href) {
-			event.preventDefault()
 			goto(href)
 		}
 	}
diff --git a/frontend/src/lib/components/common/button/ButtonPopup.svelte b/frontend/src/lib/components/common/button/ButtonPopup.svelte
index b53594a0c9..cb052f64ce 100644
--- a/frontend/src/lib/components/common/button/ButtonPopup.svelte
+++ b/frontend/src/lib/components/common/button/ButtonPopup.svelte
@@ -47,6 +47,7 @@
 			bind:element={ref}
 			{...commonProps}
 			btnClasses="{$$slots.main ? '!rounded-l-none' : ''} {toggleClasses}"
+			on:click={() => {}}
 		>
 			<slot name="toggle">
 				<!-- Invisible, but needed to match the height of the 'main' button -->