From acd656ddd137c9fd160c8d481a52b1c3e6bd9753 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 22 Feb 2026 11:26:11 +0300
Subject: [PATCH] feat(Badge): create Badge ui component

---
 src/shared/ui/Badge/Badge.stories.svelte | 76 ++++++++++++++++++++++++
 src/shared/ui/Badge/Badge.svelte         | 40 +++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 src/shared/ui/Badge/Badge.stories.svelte
 create mode 100644 src/shared/ui/Badge/Badge.svelte

diff --git a/src/shared/ui/Badge/Badge.stories.svelte b/src/shared/ui/Badge/Badge.stories.svelte
new file mode 100644
index 0000000..f9e1d90
--- /dev/null
+++ b/src/shared/ui/Badge/Badge.stories.svelte
@@ -0,0 +1,76 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import Badge from './Badge.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Badge',
+    component: Badge,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Small status indicator with color variants and size options. Use for displaying status, categories, or labels.',
+            },
+            story: { inline: false },
+        },
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'success', 'warning', 'error', 'info'],
+            description: 'Color variant of the badge',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md'],
+            description: 'Size of the badge',
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+import type { Snippet } from 'svelte';
+</script>
+
+<Story name="Default">
+    {#snippet template(args)}
+        <Badge variant="default" {...args}>Default</Badge>
+    {/snippet}
+</Story>
+
+<Story name="Variants">
+    {#snippet template(args)}
+        <div class="flex gap-2">
+            <Badge variant="default" {...args}>Default</Badge>
+            <Badge variant="success" {...args}>Success</Badge>
+            <Badge variant="warning" {...args}>Warning</Badge>
+            <Badge variant="error" {...args}>Error</Badge>
+            <Badge variant="info" {...args}>Info</Badge>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="Sizes">
+    {#snippet template(args)}
+        <div class="flex items-center gap-2">
+            <Badge size="sm" {...args}>Small</Badge>
+            <Badge size="md" {...args}>Medium</Badge>
+        </div>
+    {/snippet}
+</Story>
+
+<Story name="All Combinations">
+    {#snippet template(args)}
+        <div class="space-y-2">
+            {#each ['default', 'success', 'warning', 'error', 'info'] as variant}
+                <div class="flex gap-2">
+                    <Badge {variant} size="sm" {...args}>{variant} sm</Badge>
+                    <Badge {variant} size="md" {...args}>{variant} md</Badge>
+                </div>
+            {/each}
+        </div>
+    {/snippet}
+</Story>
diff --git a/src/shared/ui/Badge/Badge.svelte b/src/shared/ui/Badge/Badge.svelte
new file mode 100644
index 0000000..a559a87
--- /dev/null
+++ b/src/shared/ui/Badge/Badge.svelte
@@ -0,0 +1,40 @@
+<!--
+    Component: Badge
+    Small status indicator with color variants and size options
+-->
+<script lang="ts">
+interface Props {
+    /**
+     * Color variant of the badge
+     * @default default
+     */
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    /**
+     * Size of the badge
+     * @default md
+     */
+    size?: 'sm' | 'md';
+}
+
+const { variant = 'default', size = 'md' }: Props = $props();
+
+const baseClasses = 'inline-flex items-center justify-center rounded-full font-medium';
+
+const variantClasses = $derived(
+    variant === 'success'
+        ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+        : variant === 'warning'
+        ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
+        : variant === 'error'
+        ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+        : variant === 'info'
+        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
+        : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
+);
+
+const sizeClasses = $derived(size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-0.5 text-sm');
+</script>
+
+<span class="{baseClasses} {variantClasses} {sizeClasses}">
+    <slot />
+</span>