From e6fa15a4d2b9ac9cf4e9b1ba5cf2ab650ef98a63 Mon Sep 17 00:00:00 2001
From: kabin thakuri <kabin@dzangolab.com>
Date: Tue, 10 Feb 2026 09:56:48 +0545
Subject: [PATCH 1/2] feat(ui/tag): add support to html attributes

---
 packages/ui/src/Tag/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/Tag/index.tsx b/packages/ui/src/Tag/index.tsx
index ea31fb27e..df075cbc0 100644
--- a/packages/ui/src/Tag/index.tsx
+++ b/packages/ui/src/Tag/index.tsx
@@ -11,7 +11,7 @@ type TagProperties = {
   rounded?: boolean;
   style?: React.CSSProperties;
   renderContent?: () => ReactNode;
-};
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "style" | "class" | "color">;
 
 export const Tag: FC<TagProperties> = ({
   className = "",
@@ -22,6 +22,7 @@ export const Tag: FC<TagProperties> = ({
   rounded,
   style,
   renderContent,
+  ...properties
 }) => {
   const tagStyle = {
     ...style,
@@ -34,6 +35,7 @@ export const Tag: FC<TagProperties> = ({
         fullWidth ? "full-width" : ""
       }`.trimEnd()}
       style={tagStyle}
+      {...properties}
     >
       {renderContent ? (
         renderContent()

From 8e814b0b7c97b39aac935e83798a0b3f5da52e5b Mon Sep 17 00:00:00 2001
From: kabin thakuri <kabin@dzangolab.com>
Date: Tue, 10 Feb 2026 11:41:07 +0545
Subject: [PATCH 2/2] refactor(ui/tag): update to use forwardRef for better ref
 handling

---
 packages/ui/src/Tag/index.tsx | 76 +++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/packages/ui/src/Tag/index.tsx b/packages/ui/src/Tag/index.tsx
index df075cbc0..d40ac6c64 100644
--- a/packages/ui/src/Tag/index.tsx
+++ b/packages/ui/src/Tag/index.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import { ReactNode, forwardRef } from "react";
 
 import { tagColors } from "./TagColors";
 
@@ -13,38 +13,44 @@ type TagProperties = {
   renderContent?: () => ReactNode;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "style" | "class" | "color">;
 
-export const Tag: FC<TagProperties> = ({
-  className = "",
-  color = "default",
-  fullWidth,
-  icon,
-  label,
-  rounded,
-  style,
-  renderContent,
-  ...properties
-}) => {
-  const tagStyle = {
-    ...style,
-    backgroundColor: tagColors[color] || color,
-  };
+export const Tag = forwardRef<HTMLSpanElement, TagProperties>(
+  (
+    {
+      className = "",
+      color = "default",
+      fullWidth,
+      icon,
+      label,
+      rounded,
+      style,
+      renderContent,
+      ...properties
+    },
+    reference,
+  ) => {
+    const tagStyle = {
+      ...style,
+      backgroundColor: tagColors[color] || color,
+    };
 
-  return (
-    <span
-      className={`dz-tag ${className} ${rounded ? "rounded" : ""} ${
-        fullWidth ? "full-width" : ""
-      }`.trimEnd()}
-      style={tagStyle}
-      {...properties}
-    >
-      {renderContent ? (
-        renderContent()
-      ) : (
-        <>
-          {icon && <i className={icon}></i>}
-          {label && label}
-        </>
-      )}
-    </span>
-  );
-};
+    return (
+      <span
+        ref={reference}
+        className={`dz-tag ${className} ${rounded ? "rounded" : ""} ${
+          fullWidth ? "full-width" : ""
+        }`.trimEnd()}
+        style={tagStyle}
+        {...properties}
+      >
+        {renderContent ? (
+          renderContent()
+        ) : (
+          <>
+            {icon && <i className={icon}></i>}
+            {label && label}
+          </>
+        )}
+      </span>
+    );
+  },
+);