From 6987e48a7d0f8a7e6da6d25305873a80d4f91b34 Mon Sep 17 00:00:00 2001
From: giuliana-gladeye <giuliana.aliotti@gladeye.com>
Date: Fri, 5 Jun 2026 15:04:53 +1200
Subject: [PATCH] feat: added suffix to tabs component

---
 packages/demo/src/components/demo/tabs.tsx    | 43 ++++++++++++++++++-
 packages/demo/src/content/components/tabs.mdx | 37 ++++++++++++++++
 packages/ui/src/components/tabs/tabs.tsx      |  4 +-
 3 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/packages/demo/src/components/demo/tabs.tsx b/packages/demo/src/components/demo/tabs.tsx
index 21fcd040..631ad850 100644
--- a/packages/demo/src/components/demo/tabs.tsx
+++ b/packages/demo/src/components/demo/tabs.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Tabs } from "@eqtylab/equality";
+import { Badge, Card, CardContent, Tabs } from "@eqtylab/equality";
 
 export function TabsDemo({
   variant = "default",
@@ -7,7 +7,8 @@ export function TabsDemo({
     | "default"
     | "with-icons"
     | "with-active-fill"
-    | "with-icons-and-active-fill";
+    | "with-icons-and-active-fill"
+    | "with-suffix";
 }) {
   if (variant === "default") {
     return (
@@ -146,5 +147,43 @@ export function TabsDemo({
     );
   }
 
+  if (variant === "with-suffix") {
+    return (
+      <Tabs
+        id="with-suffix-tabs"
+        items={[
+          {
+            label: "Declarations",
+            value: "declarations",
+            suffix: (
+              <Badge variant="neutral" size="sm">
+                12
+              </Badge>
+            ),
+            content: (
+              <Card>
+                <CardContent>Declarations Content</CardContent>
+              </Card>
+            ),
+          },
+          {
+            label: "Reviews",
+            value: "reviews",
+            suffix: (
+              <Badge variant="primary" size="sm">
+                3
+              </Badge>
+            ),
+            content: (
+              <Card>
+                <CardContent>Reviews Content</CardContent>
+              </Card>
+            ),
+          },
+        ]}
+      />
+    );
+  }
+
   return null;
 }
diff --git a/packages/demo/src/content/components/tabs.mdx b/packages/demo/src/content/components/tabs.mdx
index 58d3876e..930e7861 100644
--- a/packages/demo/src/content/components/tabs.mdx
+++ b/packages/demo/src/content/components/tabs.mdx
@@ -169,6 +169,42 @@ Combine icons with the filled background variant for a more prominent tab design
 />
 ```
 
+### With suffix
+
+Use the `suffix` property to render any React component after a tab's label. This is useful for badges, counts, or status indicators. The suffix works alongside icons and both background variants:
+
+<TabsDemo client:only="react" variant="with-suffix" />
+
+#### Example
+
+```tsx
+<Tabs
+  id="with-suffix-tabs"
+  items={[
+    {
+      label: "Declarations",
+      value: "declarations",
+      suffix: (
+        <Badge variant="neutral" size="sm">
+          12
+        </Badge>
+      ),
+      content: <div>Declarations Content</div>,
+    },
+    {
+      label: "Reviews",
+      value: "reviews",
+      suffix: (
+        <Badge variant="primary" size="sm">
+          3
+        </Badge>
+      ),
+      content: <div>Reviews Content</div>,
+    },
+  ]}
+/>
+```
+
 ## Props
 
 ---
@@ -190,4 +226,5 @@ Each item in the `items` array should have the following structure:
 | `label`   | Text label displayed on the tab trigger                      | `string`                       | -       | ✅       |
 | `value`   | Unique value that identifies this tab                        | `string`                       | -       | ✅       |
 | `icon`    | Icon to display alongside the label (Lucide name or element) | `React.ReactElement`, `string` | -       | ❌       |
+| `suffix`  | Content rendered after the label (e.g. a badge or count)     | `React.ReactNode`              | -       | ❌       |
 | `content` | Content to display when this tab is active                   | `React.ReactNode`              | -       | ✅       |
diff --git a/packages/ui/src/components/tabs/tabs.tsx b/packages/ui/src/components/tabs/tabs.tsx
index bf6e12fc..ec1ae724 100644
--- a/packages/ui/src/components/tabs/tabs.tsx
+++ b/packages/ui/src/components/tabs/tabs.tsx
@@ -17,6 +17,7 @@ interface TabsProps {
     label: string;
     value: string;
     icon?: React.ReactElement | string;
+    suffix?: React.ReactNode;
     content: React.ReactNode;
   }[];
   className?: string;
@@ -79,7 +80,7 @@ const Tabs = ({
           isFilled ? styles['tabs-list--filled'] : styles['tabs-list--transparent']
         )}
       >
-        {items.map(({ label, value, icon }) => {
+        {items.map(({ label, value, icon, suffix }) => {
           const isActive = activeTab === value;
 
           return (
@@ -94,6 +95,7 @@ const Tabs = ({
             >
               {renderIcon(icon)}
               {label}
+              {suffix}
               {renderActiveStyle(isActive)}
             </TabsTrigger>
           );