diff --git a/.changeset/sixty-mayflies-guess.md b/.changeset/sixty-mayflies-guess.md
new file mode 100644
index 0000000000..e11bc71642
--- /dev/null
+++ b/.changeset/sixty-mayflies-guess.md
@@ -0,0 +1,5 @@
+---
+'@storefront-ui/vue': patch
+---
+
+- **[FIXED]** allow to change default `data-testid` attribute on `SfButton` and `SfBadge` components.
diff --git a/packages/sfui/frameworks/vue/components/SfBadge/SfBadge.vue b/packages/sfui/frameworks/vue/components/SfBadge/SfBadge.vue
index 3a700f37c2..e898eb769f 100644
--- a/packages/sfui/frameworks/vue/components/SfBadge/SfBadge.vue
+++ b/packages/sfui/frameworks/vue/components/SfBadge/SfBadge.vue
@@ -52,8 +52,8 @@ const displayValue = computed(() => {
         $attrs.class,
       )
     "
-    v-bind="attrsWithoutClass"
     data-testid="badge"
+    v-bind="attrsWithoutClass"
   >
     {{ displayValue }}
   </span>
diff --git a/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue b/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue
index 09eb04fedc..549539bc46 100644
--- a/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue
+++ b/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue
@@ -75,6 +75,7 @@ const type = computed(
 <template>
   <component
     :is="tagWithDefaults"
+    data-testid="button"
     v-bind="attrsWithoutClass"
     :type="type"
     :disabled="disabled"
@@ -87,7 +88,6 @@ const type = computed(
         $attrs.class,
       )
     "
-    data-testid="button"
   >
     <slot v-if="$slots.prefix" name="prefix" />
     <slot />