From 79d5f809e5ea18ff9738e60082fba1a1a40bca4f Mon Sep 17 00:00:00 2001
From: Wenyi He <wenyi.he@front.com>
Date: Fri, 14 Nov 2025 16:02:12 -0300
Subject: [PATCH] Add className prop to Pill

---
 src/components/pill/pill.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/pill/pill.tsx b/src/components/pill/pill.tsx
index 07ffe3dd..7de0388a 100644
--- a/src/components/pill/pill.tsx
+++ b/src/components/pill/pill.tsx
@@ -40,6 +40,8 @@ interface PillProps {
   children: React.ReactNode;
   /** Called when the pill is clicked. */
   onClick?: MouseEventHandler;
+  /** Class name to allow custom styling of the pill. */
+  className?: string;
 }
 
 /*
@@ -88,10 +90,10 @@ function addPillStyles(colors: SelectableComponentColors, isSelected?: boolean)
  */
 
 export const Pill: FC<PillProps> = (props) => {
-  const {children, colors = defaultPillColors, isSelected, onClick} = props;
+  const {children, colors = defaultPillColors, isSelected, onClick, className} = props;
 
   return (
-    <StyledPillDiv $colors={colors} $isSelected={isSelected} onClick={onClick}>
+    <StyledPillDiv $colors={colors} $isSelected={isSelected} onClick={onClick} className={className}>
       {renderChildrenSpecifiedComponents(children, ['PillContentIcon'])}
       {renderPillChildren(children)}
     </StyledPillDiv>