diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
new file mode 100644
index 0000000..259d4d2
--- /dev/null
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import clsx from 'clsx'
+
+type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline'
+type BadgeSize    = 'sm' | 'md'
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant
+  size?:    BadgeSize
+  dot?:     boolean
+}
+
+const variantClasses: Record<BadgeVariant, string> = {
+  default:  'bg-surface-100 text-ink-muted border-surface-200',
+  primary:  'bg-brand-50   text-brand-700  border-brand-200',
+  success:  'bg-success-50 text-success-700 border-success-200',
+  warning:  'bg-warning-50 text-warning-600 border-warning-200',
+  danger:   'bg-danger-50  text-danger-700  border-danger-200',
+  outline:  'bg-transparent text-ink-muted border-surface-300',
+}
+
+const dotColors: Record<BadgeVariant, string> = {
+  default: 'bg-ink-subtle',
+  primary: 'bg-brand-500',
+  success: 'bg-success-500',
+  warning: 'bg-warning-500',
+  danger:  'bg-danger-500',
+  outline: 'bg-ink-subtle',
+}
+
+const sizeClasses: Record<BadgeSize, string> = {
+  sm: 'px-1.5 py-0 text-2xs gap-1',
+  md: 'px-2   py-0.5 text-xs gap-1.5',
+}
+
+export function Badge({
+  variant  = 'default',
+  size     = 'md',
+  dot      = false,
+  className,
+  children,
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      className={clsx(
+        'inline-flex items-center font-medium rounded-full border',
+        variantClasses[variant],
+        sizeClasses[size],
+        className,
+      )}
+      {...props}
+    >
+      {dot && (
+        <span
+          className={clsx('w-1.5 h-1.5 rounded-full shrink-0', dotColors[variant])}
+          aria-hidden="true"
+        />
+      )}
+      {children}
+    </span>
+  )
+}
+
+export default Badge