Initial commit

docs/components/badge.md

@@ -0,0 +1,68 @@
+# Badge Component Documentation
+
+## Overview
+
+The Badge component displays a badge or badge-like visual element. It extends standard span functionality with customizable variants and shapes.
+
+## Type Definition
+
+```typescript
+interface BadgeProps extends ComponentProps<"span">, VariantProps<typeof badgeVariants> {
+  asChild?: boolean;
+  variant?: "default" | "secondary" | "destructive" | "success" | "warning" | "accent";
+  type?: "default" | "circle" | "dot";
+}
+```
+
+## Properties
+
+| Property | Type | Default | Purpose |
+|----------|------|---------|---------|
+| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'success' \| 'warning' \| 'accent'` | `'default'` | Determines the visual styling |
+| `type` | `'default' \| 'circle' \| 'dot'` | `'default'` | Controls shape and layout presentation |
+| `asChild` | `boolean` | `false` | Enables `Slot` rendering for child element styling |
+| span props | `ComponentProps<'span'>` | — | All native HTML span attributes supported |
+
+## Basic Examples
+
+Simple badge variants:
+```jsx
+<Badge>Default</Badge>
+<Badge variant="success">Deployed</Badge>
+<Badge type="circle">3</Badge>
+<Badge type="dot" />
+```
+
+## Usage Patterns
+
+**Variant showcase:**
+```jsx
+<Badge>Badge</Badge>
+<Badge variant="secondary">Secondary</Badge>
+<Badge variant="destructive">Destructive</Badge>
+<Badge variant="success">Success</Badge>
+<Badge variant="warning">warning</Badge>
+```
+
+**Circular badge indicators:**
+```jsx
+<Badge type="circle">3</Badge>
+<Badge variant="secondary" type="circle">3</Badge>
+<Badge variant="destructive" type="circle">3</Badge>
+<Badge variant="success" type="circle">3</Badge>
+<Badge variant="warning" type="circle">3</Badge>
+```
+
+**Dot indicators:**
+```jsx
+<Badge type="dot" />
+<Badge variant="secondary" type="dot" />
+<Badge variant="destructive" type="dot" />
+<Badge variant="success" type="dot" />
+<Badge variant="warning" type="dot" />
+```
+
+## References
+
+- [Radix UI Badge Documentation](https://www.radix-ui.com/primitives/docs/components/badge)
+- [API Reference](https://www.radix-ui.com/primitives/docs/components/badge#api-reference)