diff --git a/web/src/components/atomic/Badge.vue b/web/src/components/atomic/Badge.vue
index 0335acea0..1e79e02da 100644
--- a/web/src/components/atomic/Badge.vue
+++ b/web/src/components/atomic/Badge.vue
@@ -1,16 +1,16 @@
 <template>
   <span class="inline-flex items-center text-xs font-medium">
     <span
+      v-if="label !== undefined"
       class="border-wp-state-neutral-100 bg-wp-state-neutral-100 rounded-l-full border-1 py-0.5 pr-1 pl-2 whitespace-nowrap text-gray-300"
-      :class="{
-        'rounded-r-full pr-2': value === undefined,
-      }"
     >
       {{ label }}
     </span>
     <span
-      v-if="value !== undefined"
       class="border-wp-state-neutral-100 rounded-r-full border-1 py-0.5 pr-2 pl-1 whitespace-nowrap"
+      :class="{
+        'rounded-l-full pl-2': label === undefined,
+      }"
     >
       {{ value }}
     </span>
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
 defineProps<{
-  label: string;
-  value?: string | number;
+  label?: string;
+  value: string | number;
 }>();
 </script>
diff --git a/web/src/components/secrets/SecretList.vue b/web/src/components/secrets/SecretList.vue
index 67320afc1..1986a31d2 100644
--- a/web/src/components/secrets/SecretList.vue
+++ b/web/src/components/secrets/SecretList.vue
@@ -9,10 +9,10 @@
       <Badge
         v-if="secret.edit === false"
         class="ml-2"
-        :label="secret.org_id === 0 ? $t('global_level_secret') : $t('org_level_secret')"
+        :value="secret.org_id === 0 ? $t('global_level_secret') : $t('org_level_secret')"
       />
       <div class="md:display-unset ml-auto hidden space-x-2">
-        <Badge v-for="event in secret.events" :key="event" :label="event" />
+        <Badge v-for="event in secret.events" :key="event" :value="event" />
       </div>
       <template v-if="secret.edit !== false">
         <IconButton
diff --git a/web/src/views/RepoAdd.vue b/web/src/views/RepoAdd.vue
index e48abb5a8..a9f377d5b 100644
--- a/web/src/views/RepoAdd.vue
+++ b/web/src/views/RepoAdd.vue
@@ -15,7 +15,7 @@
           <span class="text-wp-text-100">{{ repo.full_name }}</span>
           <span v-if="repo.active" class="text-wp-text-alt-100 ml-auto">{{ $t('repo.enable.enabled') }}</span>
           <div v-else class="ml-auto flex items-center">
-            <Badge v-if="repo.id" class="md:display-unset mr-2 hidden" :label="$t('repo.enable.disabled')" />
+            <Badge v-if="repo.id" class="md:display-unset mr-2 hidden" :value="$t('repo.enable.disabled')" />
             <Button
               :text="$t('repo.enable.enable')"
               :is-loading="isActivatingRepo && repoToActivate?.forge_remote_id === repo.forge_remote_id"
diff --git a/web/src/views/admin/AdminRepos.vue b/web/src/views/admin/AdminRepos.vue
index b435b6ad2..595cb2296 100644
--- a/web/src/views/admin/AdminRepos.vue
+++ b/web/src/views/admin/AdminRepos.vue
@@ -20,7 +20,7 @@
           <Badge
             v-if="!repo.active"
             class="md:display-unset mr-2 hidden"
-            :label="$t('admin.settings.repos.disabled')"
+            :value="$t('admin.settings.repos.disabled')"
           />
           <IconButton
             icon="chevron-right"
diff --git a/web/src/views/admin/AdminUsers.vue b/web/src/views/admin/AdminUsers.vue
index 2f2b53797..a6ecf3edf 100644
--- a/web/src/views/admin/AdminUsers.vue
+++ b/web/src/views/admin/AdminUsers.vue
@@ -21,7 +21,7 @@
         <Badge
           v-if="user.admin"
           class="md:display-unset ml-auto hidden"
-          :label="$t('admin.settings.users.admin.admin')"
+          :value="$t('admin.settings.users.admin.admin')"
         />
         <IconButton
           icon="edit"
diff --git a/web/src/views/repo/RepoBranches.vue b/web/src/views/repo/RepoBranches.vue
index 704892630..c4d7f80ea 100644
--- a/web/src/views/repo/RepoBranches.vue
+++ b/web/src/views/repo/RepoBranches.vue
@@ -8,7 +8,7 @@
         :to="{ name: 'repo-branch', params: { branch } }"
       >
         {{ branch }}
-        <Badge v-if="branch === repo?.default_branch" :label="$t('default')" class="ml-auto" />
+        <Badge v-if="branch === repo?.default_branch" :value="$t('default')" class="ml-auto" />
       </ListItem>
     </template>
     <div v-else-if="loading" class="text-wp-text-100 flex justify-center">