Create Badge component

webui/src/common/components/Badge/Badge.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import './styles.sass';
+
+export const Badge = ({
+  children,
+  variant = 'default',
+  size = 'md',
+  className = '',
+  ...rest
+}) => {
+  const badgeClasses = [
+    'badge',
+    `badge--${variant}`,
+    `badge--${size}`,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <span className={badgeClasses} {...rest}>
+      {children}
+    </span>
+  );
+};

webui/src/common/components/Badge/index.js

@@ -0,0 +1 @@
+export { Badge as default } from './Badge.jsx';

webui/src/common/components/Badge/styles.sass

@@ -0,0 +1,49 @@
+.badge
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  border-radius: 12px
+  font-weight: 600
+  text-transform: uppercase
+  letter-spacing: 0.5px
+  white-space: nowrap
+  
+  &--sm
+    padding: 0.125rem 0.5rem
+    font-size: 0.65rem
+  
+  &--md
+    padding: 0.25rem 0.75rem
+    font-size: 0.75rem
+  
+  &--lg
+    padding: 0.375rem 1rem
+    font-size: 0.85rem
+  
+  &--default
+    background: var(--bg-elev)
+    color: var(--text-dim)
+  
+  &--primary
+    background: rgba(15, 98, 254, 0.1)
+    color: #0f62fe
+  
+  &--success
+    background: rgba(22, 163, 74, 0.1)
+    color: #16a34a
+  
+  &--warning
+    background: rgba(245, 158, 11, 0.1)
+    color: #f59e0b
+  
+  &--danger
+    background: rgba(217, 48, 37, 0.1)
+    color: #d93025
+  
+  &--admin
+    background: #e3f2fd
+    color: #1976d2
+  
+  &--user
+    background: var(--bg-elev)
+    color: var(--text-dim)