diff --git a/web/store/replaceCheck.ts b/web/store/replaceCheck.ts
index 4ae656bcc..72c5199f3 100644
--- a/web/store/replaceCheck.ts
+++ b/web/store/replaceCheck.ts
@@ -8,12 +8,17 @@ import type { WretchError } from 'wretch';
 
 import { validateGuid, type ValidateGuidPayload } from '~/composables/services/keyServer';
 import { useServerStore } from '~/store/server';
+import type { UiBadgeProps } from '~/types/ui/badge';
 /**
  * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
  * @see https://github.com/vuejs/pinia/discussions/1085
  */
 setActivePinia(createPinia());
 
+export interface UiBadgePropsExtended extends UiBadgeProps {
+  text?: string;
+}
+
 export const useReplaceCheckStore = defineStore('replaceCheck', () => {
   const serverStore = useServerStore();
 
@@ -27,7 +32,7 @@ export const useReplaceCheckStore = defineStore('replaceCheck', () => {
     cause?: unknown;
   } | null>(null);
   const status = ref<'checking' | 'eligible' | 'error' | 'ineligible' | 'ready'>(guid.value ? 'ready' : 'error');
-  const statusOutput = computed(() => {
+  const statusOutput = computed((): UiBadgePropsExtended => {
     // text values are translated in the component
     switch (status.value) {
       case 'eligible':
diff --git a/web/types/ui/badge.ts b/web/types/ui/badge.ts
new file mode 100644
index 000000000..15986c7ad
--- /dev/null
+++ b/web/types/ui/badge.ts
@@ -0,0 +1,12 @@
+import { XCircleIcon } from '@heroicons/vue/24/solid';
+import type { Component } from 'vue';
+
+export type UiBadgePropsColor = 'alpha' | 'beta' | 'gamma' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | 'orange' | 'black' | 'white' | 'transparent' | 'current' | 'custom';
+
+export interface UiBadgeProps {
+  color?: UiBadgePropsColor;
+  icon?: typeof XCircleIcon | Component;
+  iconRight?: typeof XCircleIcon | Component;
+  iconStyles?: string;
+  size?: '12px' | '14px' | '16px' | '18px' | '20px' | '24px';
+}