feat(Avatar): Add textColor prop to customize text color

JF-Cozy · JF-Cozy · commit d2f0fc6ca0cc · 2026-03-24T09:08:49.000+01:00
diff --git a/react/Avatar/Readme.md b/react/Avatar/Readme.md
@@ -87,6 +87,7 @@ const initialVariants = [{ disabled: false, border: false, innerBorder: false }]
         <Avatar color="sunrise" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>CD</Avatar>
         <Avatar color="sunrise" size={94} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>DE</Avatar>
         <Avatar color="#0000ff" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>EF</Avatar>
+        <Avatar color="grey" textColor="white" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>FG</Avatar>
       </div>
     </>
   )}
diff --git a/react/Avatar/index.jsx b/react/Avatar/index.jsx
@@ -14,7 +14,8 @@ const useStyles = makeStyles(theme => ({
     fontSize: ({ size }) => size / 2
   },
   colorDefault: {
-    color: ({ color }) => (color ? theme.palette.primary.contrastText : ''),
+    color: ({ color, textColor }) =>
+      textColor ? textColor : color ? theme.palette.primary.contrastText : '',
     background: ({ color }) =>
       supportedColors.includes(color) ? colorMapping[color] : color
   }
@@ -28,14 +29,16 @@ const Avatar = ({
   innerBorder,
   disabled,
   display,
+  textColor,
   ...props
 }) => {
   const isCustomSize = typeof size === 'number'
   const defaultColor =
     typeof props.children === 'string' ? nameToColor(props.children) : undefined
   const classes = useStyles({
     size: isCustomSize ? size : undefined,
-    color: color === 'none' ? undefined : color || defaultColor
+    color: color === 'none' ? undefined : color || defaultColor,
+    textColor
   })
 
   return (
@@ -59,6 +62,7 @@ Avatar.propTypes = {
     PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl']),
     PropTypes.number
   ]),
+  textColor: PropTypes.string,
   color: PropTypes.oneOfType([
     PropTypes.oneOf([...supportedColors, 'none']),
     PropTypes.string
