diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index 3586e1a86..8e9bf015f 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -6,7 +6,7 @@
style="background: var(--border-color)"
>
-
+
diff --git a/src/components/topbar/TopbarBadges.vue b/src/components/topbar/TopbarBadges.vue
new file mode 100644
index 000000000..381b4d13c
--- /dev/null
+++ b/src/components/topbar/TopbarBadges.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
diff --git a/src/extensions/core/cloudBadge.ts b/src/extensions/core/cloudBadge.ts
new file mode 100644
index 000000000..5f2b569fa
--- /dev/null
+++ b/src/extensions/core/cloudBadge.ts
@@ -0,0 +1,16 @@
+import { t } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
+import { useExtensionService } from '@/services/extensionService'
+
+useExtensionService().registerExtension({
+ name: 'Comfy.CloudBadge',
+ // Only show badge when running in cloud environment
+ topbarBadges: isCloud
+ ? [
+ {
+ label: t('g.beta'),
+ text: 'Comfy Cloud'
+ }
+ ]
+ : undefined
+})
diff --git a/src/extensions/core/index.ts b/src/extensions/core/index.ts
index 5354ef4e9..011502f44 100644
--- a/src/extensions/core/index.ts
+++ b/src/extensions/core/index.ts
@@ -1,3 +1,5 @@
+import { isCloud } from '@/platform/distribution/types'
+
import './clipspace'
import './contextMenuFilter'
import './dynamicPrompts'
@@ -21,3 +23,7 @@ import './uploadAudio'
import './uploadImage'
import './webcamCapture'
import './widgetInputs'
+
+if (isCloud) {
+ import('./cloudBadge')
+}
diff --git a/src/stores/topbarBadgeStore.ts b/src/stores/topbarBadgeStore.ts
new file mode 100644
index 000000000..e4547ae46
--- /dev/null
+++ b/src/stores/topbarBadgeStore.ts
@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+
+import type { TopbarBadge } from '@/types/comfy'
+
+import { useExtensionStore } from './extensionStore'
+
+export const useTopbarBadgeStore = defineStore('topbarBadge', () => {
+ const extensionStore = useExtensionStore()
+
+ const badges = computed
(() =>
+ extensionStore.extensions.flatMap((e) => e.topbarBadges ?? [])
+ )
+
+ return {
+ badges
+ }
+})
diff --git a/src/types/comfy.ts b/src/types/comfy.ts
index 184aa7a4e..f11488380 100644
--- a/src/types/comfy.ts
+++ b/src/types/comfy.ts
@@ -33,6 +33,14 @@ type MenuCommandGroup = {
commands: string[]
}
+export interface TopbarBadge {
+ text: string
+ /**
+ * Optional badge label (e.g., "BETA", "ALPHA", "NEW")
+ */
+ label?: string
+}
+
export type MissingNodeType =
| string
// Primarily used by group nodes.
@@ -74,6 +82,10 @@ export interface ComfyExtension {
* Badges to add to the about page
*/
aboutPageBadges?: AboutPageBadge[]
+ /**
+ * Badges to add to the top bar
+ */
+ topbarBadges?: TopbarBadge[]
/**
* Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added
* @param app The ComfyUI app instance