@coinbase/cds-mobile 8.49.2 → 8.50.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.50.0 (3/6/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: iconSize customization for IconButton. [[#474](https://github.com/coinbase/cds/pull/474)]
+
 ## 8.49.2 (3/6/2026 PST)
 
 #### 🐞 Fixes

package/dts/buttons/IconButton.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
-import type { IconButtonVariant, IconName, SharedProps } from '@coinbase/cds-common/types';
+import type {
+  IconButtonVariant,
+  IconName,
+  IconSize,
+  SharedProps,
+} from '@coinbase/cds-common/types';
 import { type PressableBaseProps } from '../system/Pressable';
 import type { ButtonBaseProps } from './Button';
 export type IconButtonBaseProps = SharedProps &
@@ -7,6 +12,11 @@ export type IconButtonBaseProps = SharedProps &
   Pick<ButtonBaseProps, 'disabled' | 'transparent' | 'compact' | 'flush' | 'loading'> & {
     /** Name of the icon, as defined in Figma. */
     name: IconName;
+    /**
+     * Size for the icon rendered inside the button.
+     * @default compact ? 's' : 'm'
+     */
+    iconSize?: IconSize;
     /** Whether the icon is active */
     active?: boolean;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK3F,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACpF,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf,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,iDAiFrB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACpF,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,iDAiFrB,CAAC"}

package/esm/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "borderWidth", "borderRadius", "feedback", "flush", "loading", "style", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "loading", "style", "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 React, { memo, useCallback, useMemo } from 'react';
@@ -20,6 +20,7 @@ export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
       background,
       color,
       borderColor,
+      iconSize = compact ? 's' : 'm',
       borderWidth = 100,
       borderRadius = 1000,
       feedback = compact ? 'light' : 'normal',
@@ -31,7 +32,6 @@ export const IconButton = /*#__PURE__*/memo(function IconButton(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
-  const iconSize = compact ? 's' : 'm';
   const variantMap = transparent ? transparentVariants : variants;
   const variantStyle = variantMap[variant];
   const colorValue = color != null ? color : variantStyle.color;

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

@@ -138,6 +138,36 @@ const IconButtonScreen = () => {
           }), variant.title]
         }, index);
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Icon sizes",
+      children: /*#__PURE__*/_jsx(Box, {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: 350,
+        children: /*#__PURE__*/_jsxs(HStack, {
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Extra small icon",
+            iconSize: "xs",
+            name: iconName
+          }), /*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Small icon",
+            iconSize: "s",
+            name: iconName
+          }), /*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Medium icon",
+            iconSize: "m",
+            name: iconName
+          }), /*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Large icon",
+            compact: false,
+            iconSize: "l",
+            name: iconName
+          })]
+        })
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "All",
       children: names.map(name => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.49.2",
+  "version": "8.50.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.49.2",
+    "@coinbase/cds-common": "^8.50.0",
     "@coinbase/cds-icons": "^5.12.0",
     "@coinbase/cds-illustrations": "^4.32.0",
     "@coinbase/cds-lottie-files": "^3.3.4",