diff --git a/src/shared/ui/Badge/Badge.svelte.test.ts b/src/shared/ui/Badge/Badge.svelte.test.ts
new file mode 100644
index 0000000..1cfbb23
--- /dev/null
+++ b/src/shared/ui/Badge/Badge.svelte.test.ts
@@ -0,0 +1,80 @@
+import {
+    render,
+    screen,
+} from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import Badge from './Badge.svelte';
+
+function textSnippet(text: string) {
+    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+}
+
+describe('Badge', () => {
+    describe('Rendering', () => {
+        it('renders text content', () => {
+            render(Badge, { children: textSnippet('v1.0') });
+            expect(screen.getByText('v1.0')).toBeInTheDocument();
+        });
+
+        it('renders as a span element', () => {
+            const { container } = render(Badge, { children: textSnippet('test') });
+            expect(container.querySelector('span')).toBeInTheDocument();
+        });
+
+        it('renders nothing extra when no children', () => {
+            const { container } = render(Badge);
+            const span = container.querySelector('span');
+            expect(span).toBeInTheDocument();
+            expect(span?.textContent?.trim()).toBe('');
+        });
+    });
+
+    describe('Dot', () => {
+        it('renders status dot when dot=true', () => {
+            const { container } = render(Badge, {
+                children: textSnippet('live'),
+                dot: true,
+            });
+            const dots = container.querySelectorAll('span > span');
+            expect(dots.length).toBeGreaterThan(0);
+        });
+
+        it('does not render dot by default', () => {
+            const { container } = render(Badge, { children: textSnippet('live') });
+            const innerSpans = container.querySelectorAll('span > span');
+            expect(innerSpans).toHaveLength(1); // only the children span
+        });
+    });
+
+    describe('Variants', () => {
+        it.each(['default', 'accent', 'success', 'warning', 'info'] as const)(
+            'renders %s variant without error',
+            variant => {
+                render(Badge, { children: textSnippet('label'), variant });
+                expect(screen.getByText('label')).toBeInTheDocument();
+            },
+        );
+    });
+
+    describe('Sizes', () => {
+        it.each(['xs', 'sm', 'md', 'lg'] as const)('renders %s size without error', size => {
+            render(Badge, { children: textSnippet('label'), size });
+            expect(screen.getByText('label')).toBeInTheDocument();
+        });
+    });
+
+    describe('Nowrap', () => {
+        it('applies nowrap when nowrap=true', () => {
+            const { container } = render(Badge, {
+                children: textSnippet('no wrap text'),
+                nowrap: true,
+            });
+            expect(container.querySelector('span')).toHaveClass('text-nowrap');
+        });
+
+        it('does not apply nowrap by default', () => {
+            const { container } = render(Badge, { children: textSnippet('wrappable') });
+            expect(container.querySelector('span')).not.toHaveClass('text-nowrap');
+        });
+    });
+});