From e1922d7833893bec9af0b8164f840b3c48d734f9 Mon Sep 17 00:00:00 2001
From: Tharsiga-21 <tharsigamanivathanan@gmail.com>
Date: Tue, 2 Jun 2026 22:31:09 +0530
Subject: [PATCH 1/2] Refactor Badge component to improve icon rendering

---
 src/components/ui/Badge.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
index 7c70043d..82324f5d 100644
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -23,12 +23,24 @@ const sizeClasses: Record<BadgeSize, string> = {
   md: "px-3.5 py-1 text-sm",
 };
 
+const iconSizeClasses: Record<BadgeSize, string> = {
+  sm: "w-3 h-3",
+  md: "w-4 h-4",
+};
+
 const Badge = ({ label, variant = "default", size = "md", icon }: BadgeProps) => {
   return (
     <span
       className={`inline-flex items-center gap-1.5 rounded-full font-medium transition-all duration-200 ${variantClasses[variant]} ${sizeClasses[size]}`}
     >
-      {icon && <span className="flex-shrink-0">{icon}</span>}
+      {icon && (
+        <span
+          className={`inline-flex items-center justify-center shrink-0 text-current ${iconSizeClasses[size]}`}
+          aria-hidden="true"
+        >
+          {icon}
+        </span>
+      )}
       {label}
     </span>
   );

From 8ee89da25c67ab47a6c7923f84194fd52f0aa5b9 Mon Sep 17 00:00:00 2001
From: Tharsiga-21 <tharsigamanivathanan@gmail.com>
Date: Fri, 5 Jun 2026 15:55:10 +0530
Subject: [PATCH 2/2] Update Badge.tsx

---
 src/components/ui/Badge.tsx | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
index c445fb8d..286c77c7 100644
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -48,7 +48,6 @@ const iconSizeClasses: Record<BadgeSize, string> = {
   md: "w-4 h-4",
 };
 
-const Badge = ({ label, variant = "default", size = "md", icon }: BadgeProps) => {
 const interactiveClasses =
   "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-current disabled:cursor-not-allowed disabled:opacity-60";
 
@@ -68,16 +67,24 @@ const getBadgeClasses = (
     .filter(Boolean)
     .join(" ");
 
-const renderBadgeContent = (
-  icon: React.ReactNode,
-  children: React.ReactNode,
-  label?: string
-) => {
-  const content = children ?? label;
+const Badge = (props: BadgeProps) => {
+  const {
+    as: Component = "span",
+    label,
+    children,
+    variant = "default",
+    size = "md",
+    icon,
+    className = "",
+    ...restProps
+  } = props as BadgeSpanProps & BadgeButtonProps & BadgeAnchorProps;
+
+  const isInteractive = Component === "button" || Component === "a";
 
   return (
-    <span
-      className={`inline-flex items-center gap-1.5 rounded-full font-medium transition-colors ${variantClasses[variant]} ${sizeClasses[size]}`}
+    <Component
+      className={getBadgeClasses(variant, size, isInteractive, className)}
+      {...restProps}
     >
       {icon && (
         <span
@@ -87,8 +94,8 @@ const renderBadgeContent = (
           {icon}
         </span>
       )}
-      {label}
-    </span>
+      {children ?? label}
+    </Component>
   );
 };