@coinbase/cds-mobile 8.70.0 → 8.71.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.71.0 (5/12/2026 PST)
+
+#### 🚀 Updates
+
+- Add icon glyph and progress circle styles to IconButton. [[#606](https://github.com/coinbase/cds/pull/606)]
+
 ## 8.70.0 (5/8/2026 PST)
 
 #### 🚀 Updates

package/dts/buttons/IconButton.d.ts

@@ -1,4 +1,4 @@
-import { type View } from 'react-native';
+import { type StyleProp, type TextStyle, type View, type ViewStyle } from 'react-native';
 import type {
   IconButtonVariant,
   IconName,
@@ -27,6 +27,15 @@ export type IconButtonBaseProps = SharedProps &
      * @default primary
      */
     variant?: IconButtonVariant;
+    /** Custom styles for individual elements of the IconButton component */
+    styles?: {
+      /** Root Pressable element */
+      root?: StyleProp<ViewStyle>;
+      /** Inner icon glyph Text element */
+      icon?: StyleProp<TextStyle>;
+      /** Loading progress circle element */
+      progressCircle?: StyleProp<ViewStyle>;
+    };
   };
 export type IconButtonProps = IconButtonBaseProps;
 export declare const IconButton: import('react').MemoExoticComponent<
@@ -51,6 +60,15 @@ export declare const IconButton: import('react').MemoExoticComponent<
          * @default primary
          */
         variant?: IconButtonVariant;
+        /** Custom styles for individual elements of the IconButton component */
+        styles?: {
+          /** Root Pressable element */
+          root?: StyleProp<ViewStyle>;
+          /** Inner icon glyph Text element */
+          icon?: StyleProp<TextStyle>;
+          /** Loading progress circle element */
+          progressCircle?: StyleProp<ViewStyle>;
+        };
       } & import('react').RefAttributes<View>
   >
 >;

package/dts/buttons/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmC,KAAK,IAAI,EAAkB,MAAM,cAAc,CAAC;AAG1F,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CACF,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CACpF,GAAG;IACF,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU;IAlBnB,6CAA6C;UACvC,QAAQ;IACd;;;OAGG;eACQ,QAAQ;IACnB,iCAAiC;aACxB,OAAO;IAChB;;;OAGG;cACO,iBAAiB;yCAqG9B,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CACF,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CACpF,GAAG;IACF,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,wEAAwE;IACxE,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sCAAsC;QACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU;IA3BnB,6CAA6C;UACvC,QAAQ;IACd;;;OAGG;eACQ,QAAQ;IACnB,iCAAiC;aACxB,OAAO;IAChB;;;OAGG;cACO,iBAAiB;IAC3B,wEAAwE;aAC/D;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sCAAsC;QACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC;yCAyGJ,CAAC"}

package/dts/controls/InputIconButton.d.ts

@@ -22,6 +22,11 @@ export declare const InputIconButton: React.MemoExoticComponent<
         iconSize?: import('@coinbase/cds-common').IconSize;
         active?: boolean;
         variant?: IconButtonVariant;
+        styles?: {
+          root?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+          icon?: import('react-native').StyleProp<import('react-native').TextStyle>;
+          progressCircle?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+        };
       } & {
         /**
          * If set to true, when parent input is focused, the icon will match the color of the focus state

package/dts/controls/InputIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputIconButton.d.ts","sourceRoot":"","sources":["../../src/controls/InputIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAElF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKzE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAOvE,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IACnD;;;SAGK;IACL,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;IAP1B;;;SAGK;+BACsB,OAAO;+BA+BnC,CAAC"}
+{"version":3,"file":"InputIconButton.d.ts","sourceRoot":"","sources":["../../src/controls/InputIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAElF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAKzE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAOvE,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAAG;IACnD;;;SAGK;IACL,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;YA6BzB,CAAC;YAA6E,CAAC;sBAAyF,CAAC;;;IApC1K;;;SAGK;+BACsB,OAAO;+BA+BnC,CAAC"}

package/esm/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "height", "width", "feedback", "flush", "loading", "progressCircleSize", "style", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "height", "width", "feedback", "flush", "loading", "progressCircleSize", "style", "styles", "accessibilityHint", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { forwardRef, memo, useCallback, useMemo } from 'react';
@@ -33,6 +33,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       loading,
       progressCircleSize,
       style,
+      styles,
       accessibilityHint,
       accessibilityLabel
     } = mergedProps,
@@ -58,7 +59,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     flexDirection: 'column',
     justifyContent: 'center'
   }), [height, width]);
-  const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style], [sizingStyle, style]);
+  const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style, styles == null ? void 0 : styles.root], [sizingStyle, style, styles == null ? void 0 : styles.root]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
     accessibilityHint: accessibilityHint,
@@ -83,6 +84,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
         indeterminate: true,
         color: colorValue,
         size: progressCircleSize != null ? progressCircleSize : iconSizeValue,
+        style: styles == null ? void 0 : styles.progressCircle,
         testID: props.testID ? props.testID + "-progress-circle" : undefined,
         weight: "thin"
       })
@@ -94,7 +96,10 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       color: colorValue,
       name: name,
       size: iconSize,
-      style: sizingStyle
+      style: sizingStyle,
+      styles: {
+        icon: styles == null ? void 0 : styles.icon
+      }
     })
   }));
 }));

package/esm/buttons/__stories__/IconButton.stories.js

@@ -182,6 +182,71 @@ const IconButtonScreen = () => {
           })]
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Icon Glyph Styles",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Custom color via styles.icon",
+            name: iconName,
+            styles: {
+              icon: {
+                color: 'dodgerblue'
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Custom color via styles.icon"
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Rotated icon via styles.icon",
+            name: iconName,
+            styles: {
+              icon: {
+                transform: [{
+                  rotate: '45deg'
+                }]
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Rotated icon via styles.icon"
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Progress Circle Styles",
+      children: /*#__PURE__*/_jsx(VStack, {
+        gap: 2,
+        children: /*#__PURE__*/_jsxs(Box, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            loading: true,
+            accessibilityLabel: "Reduced opacity progress circle",
+            name: iconName,
+            styles: {
+              progressCircle: {
+                opacity: 0.3
+              }
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            font: "body",
+            children: "Reduced opacity"
+          })]
+        })
+      })
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "Loading",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.70.0",
+  "version": "8.71.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -196,7 +196,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.70.0",
+    "@coinbase/cds-common": "^8.71.0",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.38.0",
     "@coinbase/cds-lottie-files": "^3.3.4",