diff --git a/packages/ui/src/Tag/index.tsx b/packages/ui/src/Tag/index.tsx
index ea31fb27e..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";
 
@@ -11,38 +11,46 @@ type TagProperties = {
   rounded?: boolean;
   style?: React.CSSProperties;
   renderContent?: () => ReactNode;
-};
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "style" | "class" | "color">;
 
-export const Tag: FC<TagProperties> = ({
-  className = "",
-  color = "default",
-  fullWidth,
-  icon,
-  label,
-  rounded,
-  style,
-  renderContent,
-}) => {
-  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}
-    >
-      {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>
+    );
+  },
+);