From fd81997961f3c8954879739c55d14e3a7605b7ad Mon Sep 17 00:00:00 2001
From: Thomas Wienecke <thomas.wienecke@abusix.com>
Date: Tue, 4 Feb 2025 13:10:24 +0100
Subject: [PATCH] chore(Badge): Allow custom className on Badge component

---
 src/components/badge/badge.stories.tsx |  4 ++++
 src/components/badge/badge.tsx         | 12 ++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/badge/badge.stories.tsx b/src/components/badge/badge.stories.tsx
index 2d99f428..7be7aad0 100644
--- a/src/components/badge/badge.stories.tsx
+++ b/src/components/badge/badge.stories.tsx
@@ -54,3 +54,7 @@ export const TypesAndShapes: Story = {
         </div>
     ),
 };
+
+export const CustomClassName: Story = {
+    render: ({ children }) => <Badge className="bg-neutral-600 text-neutral-0">{children}</Badge>,
+};
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index 8b762ec1..b36f77c9 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -26,9 +26,16 @@ export interface BadgeProps {
     shape?: keyof typeof shapeVariants;
     children: ReactNode;
     onClick?: () => void;
+    className?: string;
 }
 
-export const Badge = ({ type = "primary", shape = "default", children, onClick }: BadgeProps) => {
+export const Badge = ({
+    type = "primary",
+    shape = "default",
+    children,
+    onClick,
+    className,
+}: BadgeProps) => {
     const interactiveVariant = onClick ? "cursor-pointer" : "pointer-events-none";
 
     return (
@@ -40,7 +47,8 @@ export const Badge = ({ type = "primary", shape = "default", children, onClick }
                 "inline-flex h-4 items-center px-2 text-xs font-semibold uppercase tracking-wide",
                 buttonVariants[type],
                 shapeVariants[shape],
-                interactiveVariant
+                interactiveVariant,
+                className
             )}
             onClick={onClick}
             onKeyDown={onClick}