chore(Badge): Allow custom className on Badge component

abusix · Feb 4, 2025 · fd81997 · fd81997
1 parent c60949c
commit fd81997
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git 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
@@ -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}
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>,
+    };