diff --git a/packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts b/packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts
new file mode 100644
index 000000000..7a5ed3653
--- /dev/null
+++ b/packages/design-system/src/components/N8nBadge/__tests__/Badge.spec.ts
@@ -0,0 +1,46 @@
+import { render } from '@testing-library/vue';
+import N8nBadge from '../Badge.vue';
+
+describe('components', () => {
+ describe('N8nBadge', () => {
+ describe('props', () => {
+ it('should render default theme correctly', () => {
+ const wrapper = render(N8nBadge, {
+ props: {
+ theme: 'default',
+ size: 'large',
+ bold: true,
+ },
+ slots: {
+ default: 'Default badge',
+ },
+ stubs: ['n8n-text'],
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+ it('should render secondary theme correctly', () => {
+ const wrapper = render(N8nBadge, {
+ props: {
+ theme: 'secondary',
+ size: 'medium',
+ bold: false,
+ },
+ slots: {
+ default: 'Secondary badge',
+ },
+ stubs: ['n8n-text'],
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+ it('should render with default values correctly', () => {
+ const wrapper = render(N8nBadge, {
+ slots: {
+ default: 'A Badge',
+ },
+ stubs: ['n8n-text'],
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+ });
+ });
+});
diff --git a/packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap b/packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap
new file mode 100644
index 000000000..ff14d3fd1
--- /dev/null
+++ b/packages/design-system/src/components/N8nBadge/__tests__/__snapshots__/Badge.spec.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nBadge > props > should render default theme correctly 1`] = `"Default badge"`;
+
+exports[`components > N8nBadge > props > should render secondary theme correctly 1`] = `"Secondary badge"`;
+
+exports[`components > N8nBadge > props > should render with default values correctly 1`] = `"A Badge"`;