docs: Add component specification and usage examples for N8nBadge

[cstuncsik]

Summary

Add API specification for N8nBadge migration to Reka UI design system, documenting all 4 props and 7 theme variants currently used in the codebase (including theme, size, bold, showBorder) with usage examples and implementation notes for backward compatibility.

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/DS-340/write-badge-api-specs

Review / Merge checklist

• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created.
• Tests included.
• PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

---

Note

Add N8nBadge docs with API (props/slot) and practical Vue usage examples.

• Docs (Design System):
  • Add packages/frontend/@n8n/design-system/src/v2/components/Badge/component-badge.md documenting N8nBadge.
  • Define public API: theme (7 variants), size, bold, showBorder; default slot.
  • Provide concise Vue usage examples: simple text, status, count, tertiary, icon+text, multiple sizes, custom classes, conditional, inline styles, dynamic theme binding.

^{Written by Cursor Bugbot for commit 859aea6. This will update automatically on new commits. Configure here.}

[bundlemon]

BundleMon

Unchanged files (2)

Status	Path	Size	Limits
✅	WASM Dependencies tree-sitter-bash.wasm	181.26KB	-
✅	WASM Dependencies tree-sitter.wasm	74.47KB	-

No change in files bundle size

Groups updated (2)

Status	Path	Size	Limits
✅	**/*.js	11.33MB (+38.49KB +0.33%)	-
✅	**/*.css	227.16KB (+6.39KB +2.89%)	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[cubic-dev-ai]

3 issues found across 1 file

Prompt for AI agents (all 3 issues)

Understand the root cause of the following 3 issues and fix them.


<file name="packages/frontend/@n8n/design-system/src/v2/components/Badge/component-badge.md">

<violation number="1" location="packages/frontend/@n8n/design-system/src/v2/components/Badge/component-badge.md:50">
The status-indicator example calls `ref()` but never imports it from Vue, so the provided code snippet will throw `ref is not defined` when used. Please import `ref` alongside `computed` so the example compiles.</violation>

<violation number="2" location="packages/frontend/@n8n/design-system/src/v2/components/Badge/component-badge.md:76">
The count-badge example uses `ref()` for `filterCount` but never imports it from Vue, which makes the snippet uncompilable as written. Add the missing `ref` import so readers can paste the example without errors.</violation>

<violation number="3" location="packages/frontend/@n8n/design-system/src/v2/components/Badge/component-badge.md:153">
The conditional-rendering example references Vue’s `ref()` twice but never imports it, so copying the snippet results in a runtime ReferenceError. Import `ref` from &#39;vue&#39; in this script block.</violation>
</file>

_{Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR}

[cubic-dev-ai]

The conditional-rendering example references Vue’s ref() twice but never imports it, so copying the snippet results in a runtime ReferenceError. Import ref from 'vue' in this script block.

Prompt for AI agents

Address the following comment on packages/frontend/@n8n/design-system/src/v2/components/Badge/component-badge.md at line 153:

<comment>The conditional-rendering example references Vue’s `ref()` twice but never imports it, so copying the snippet results in a runtime ReferenceError. Import `ref` from &#39;vue&#39; in this script block.</comment>

<file context>
@@ -0,0 +1,220 @@
+&lt;script setup lang=&quot;ts&quot;&gt;
+import { N8nBadge } from &#39;@n8n/design-system&#39;
+
+const isReadOnly = ref(true)
+const needsSetup = ref(false)
+&lt;/script&gt;
</file context>

[cubic-dev-ai]

The count-badge example uses ref() for filterCount but never imports it from Vue, which makes the snippet uncompilable as written. Add the missing ref import so readers can paste the example without errors.

Prompt for AI agents

Address the following comment on packages/frontend/@n8n/design-system/src/v2/components/Badge/component-badge.md at line 76:

<comment>The count-badge example uses `ref()` for `filterCount` but never imports it from Vue, which makes the snippet uncompilable as written. Add the missing `ref` import so readers can paste the example without errors.</comment>

<file context>
@@ -0,0 +1,220 @@
+&lt;script setup lang=&quot;ts&quot;&gt;
+import { N8nBadge } from &#39;@n8n/design-system&#39;
+
+const filterCount = ref(5)
+&lt;/script&gt;
+
</file context>

[cubic-dev-ai]

The status-indicator example calls ref() but never imports it from Vue, so the provided code snippet will throw ref is not defined when used. Please import ref alongside computed so the example compiles.

Prompt for AI agents

Address the following comment on packages/frontend/@n8n/design-system/src/v2/components/Badge/component-badge.md at line 50:

<comment>The status-indicator example calls `ref()` but never imports it from Vue, so the provided code snippet will throw `ref is not defined` when used. Please import `ref` alongside `computed` so the example compiles.</comment>

<file context>
@@ -0,0 +1,220 @@
+```typescript
+&lt;script setup lang=&quot;ts&quot;&gt;
+import { N8nBadge } from &#39;@n8n/design-system&#39;
+import { computed } from &#39;vue&#39;
+
+const status = ref&lt;&#39;success&#39; | &#39;warning&#39; | &#39;danger&#39;&gt;(&#39;success&#39;)
</file context>

Suggested change

	import { computed } from 'vue'
	import { computed, ref } from 'vue'

[github-actions]

✅ No visual regressions found.

[n8n-assistant]

Got released with [email protected]