diff --git a/apps/docs/content/components/collections/TagGroup.mdx b/apps/docs/content/components/collections/TagGroup.mdx
index 886ab55c..5027bc17 100644
--- a/apps/docs/content/components/collections/TagGroup.mdx
+++ b/apps/docs/content/components/collections/TagGroup.mdx
@@ -62,7 +62,7 @@ A tag can be disabled using the `isDisabled` prop.
 
 <Example src="tag/docs/tag/disabled" />
 
-### Invalid
+### Invalid Tag
 
 If a tag group is invalid, it will display an error message. Displaying this error message will hide the helper message.
 
@@ -113,7 +113,7 @@ Using the `renderEmptyState` prop, you can customize the empty state message whe
 
 <Example src="tag/docs/tagGroup/empty" />
 
-### Invalid
+### Invalid TagGroup
 
 A tag can be set as invalid using the `isInvalid` prop.
 
diff --git a/packages/components/src/tag/docs/tag/count.tsx b/packages/components/src/tag/docs/tag/count.tsx
index 674b1579..8fb90f60 100644
--- a/packages/components/src/tag/docs/tag/count.tsx
+++ b/packages/components/src/tag/docs/tag/count.tsx
@@ -3,15 +3,15 @@ import { Badge, Tag, TagGroup, Text } from "@hopper-ui/components";
 export default function Example() {
     return (
         <TagGroup aria-label="Jobs">
-            <Tag id="designer" size="sm">
+            <Tag id="designer" size="sm" textValue="Designer">
                 <Text>Designer</Text>
                 <Badge>12</Badge>
             </Tag>
-            <Tag id="developer" size="md">
+            <Tag id="developer" size="md" textValue="Developer">
                 <Text>Developer</Text>
                 <Badge variant="subdued">100</Badge>
             </Tag>
-            <Tag id="manager" size="lg">
+            <Tag id="manager" size="lg" textValue="Manager">
                 <Text>Manager</Text>
                 <Badge>99+</Badge>
             </Tag>
diff --git a/packages/components/src/tag/docs/tag/icons.tsx b/packages/components/src/tag/docs/tag/icons.tsx
index bedd8f53..d69b6199 100644
--- a/packages/components/src/tag/docs/tag/icons.tsx
+++ b/packages/components/src/tag/docs/tag/icons.tsx
@@ -4,11 +4,11 @@ import { SparklesIcon } from "@hopper-ui/icons";
 export default function Example() {
     return (
         <TagGroup aria-label="Jobs">
-            <Tag id="developer" size="sm">
+            <Tag id="developer" size="sm" textValue="Developer">
                 <SparklesIcon />
                 <Text>Developer</Text>
             </Tag>
-            <Tag id="designer" size="md">
+            <Tag id="designer" size="md" textValue="Designer">
                 <Text>Designer</Text>
                 <IconList>
                     <SparklesIcon />
@@ -16,7 +16,7 @@ export default function Example() {
                     <SparklesIcon />
                 </IconList>
             </Tag>
-            <Tag id="manager" size="lg">
+            <Tag id="manager" size="lg" textValue="Manager">
                 <Text>Manager</Text>
                 <IconList>
                     <SparklesIcon />