@coinbase/cds-mobile 8.47.4 → 8.48.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.48.0 (2/24/2026 PST)
+
+#### 🚀 Updates
+
+- Add start/end icon/node support to Tag. [[#421](https://github.com/coinbase/cds/pull/421)]
+
 ## 8.47.4 (2/23/2026 PST)
 
 #### 🐞 Fixes

package/dts/tag/Tag.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { View } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type {
+  IconName,
   SharedAccessibilityProps,
   SharedProps,
   TagColorScheme,
@@ -34,6 +35,18 @@ export type TagBaseProps = SharedProps &
     color?: ThemeVars.SpectrumColor;
     /** Setting a custom max width for this tag will enable text truncation */
     maxWidth?: BoxProps['maxWidth'];
+    /** Set the start node */
+    start?: React.ReactNode;
+    /** Icon to render at the start of the tag. */
+    startIcon?: IconName;
+    /** Whether the start icon is active */
+    startIconActive?: boolean;
+    /** Set the end node */
+    end?: React.ReactNode;
+    /** Icon to render at the end of the tag. */
+    endIcon?: IconName;
+    /** Whether the end icon is active */
+    endIconActive?: boolean;
   };
 export type TagProps = TagBaseProps &
   Omit<BoxProps, 'color' | 'background' | 'children' | 'maxWidth'>;
@@ -64,6 +77,18 @@ export declare const Tag: React.MemoExoticComponent<
         color?: ThemeVars.SpectrumColor;
         /** Setting a custom max width for this tag will enable text truncation */
         maxWidth?: BoxProps['maxWidth'];
+        /** Set the start node */
+        start?: React.ReactNode;
+        /** Icon to render at the start of the tag. */
+        startIcon?: IconName;
+        /** Whether the start icon is active */
+        startIconActive?: boolean;
+        /** Set the end node */
+        end?: React.ReactNode;
+        /** Icon to render at the end of the tag. */
+        endIcon?: IconName;
+        /** Whether the end icon is active */
+        endIconActive?: boolean;
       } & Omit<BoxProps, 'children' | 'color' | 'background' | 'maxWidth'> &
       React.RefAttributes<View>
   >

package/dts/tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,KAAK,EACV,wBAAwB,EACxB,WAAW,EACX,cAAc,EACd,WAAW,EACX,SAAS,EACV,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG/C,MAAM,MAAM,YAAY,GAAG,WAAW,GACpC,wBAAwB,GAAG;IACzB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IACrC,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,QAAQ,GAAG,YAAY,GACjC,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAEnE,eAAO,MAAM,GAAG;IA5BZ,yCAAyC;cAC/B,KAAK,CAAC,SAAS;IACzB;;;OAGG;aACM,SAAS;IAClB;;;OAGG;eACQ,WAAW;IACtB;;;OAGG;kBACW,cAAc;IAC5B,sCAAsC;iBACzB,SAAS,CAAC,aAAa;IACpC,gCAAgC;YACxB,SAAS,CAAC,aAAa;IAC/B,0EAA0E;eAC/D,QAAQ,CAAC,UAAU,CAAC;kGAqDlC,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,KAAK,EACV,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACX,cAAc,EACd,WAAW,EACX,SAAS,EACV,MAAM,4BAA4B,CAAC;AAIpC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG/C,MAAM,MAAM,YAAY,GAAG,WAAW,GACpC,wBAAwB,GAAG;IACzB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IACrC,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAChC,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,QAAQ,GAAG,YAAY,GACjC,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;AAEnE,eAAO,MAAM,GAAG;IAxCZ,yCAAyC;cAC/B,KAAK,CAAC,SAAS;IACzB;;;OAGG;aACM,SAAS;IAClB;;;OAGG;eACQ,WAAW;IACtB;;;OAGG;kBACW,cAAc;IAC5B,sCAAsC;iBACzB,SAAS,CAAC,aAAa;IACpC,gCAAgC;YACxB,SAAS,CAAC,aAAa;IAC/B,0EAA0E;eAC/D,QAAQ,CAAC,UAAU,CAAC;IAC/B,yBAAyB;YACjB,KAAK,CAAC,SAAS;IACvB,8CAA8C;gBAClC,QAAQ;IACpB,uCAAuC;sBACrB,OAAO;IACzB,uBAAuB;UACjB,KAAK,CAAC,SAAS;IACrB,4CAA4C;cAClC,QAAQ;IAClB,qCAAqC;oBACrB,OAAO;kGA4E1B,CAAC"}

package/esm/tag/Tag.js

@@ -1,12 +1,13 @@
-const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "alignItems", "justifyContent", "testID"];
+const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "alignItems", "flexDirection", "gap", "justifyContent", "paddingY", "testID"];
 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, { forwardRef, memo } from 'react';
 import { tagBorderRadiusMap, tagEmphasisColorMap, tagFontMap, tagHorizontalSpacing } from '@coinbase/cds-common/tokens/tags';
 import { useTheme } from '../hooks/useTheme';
+import { Icon } from '../icons/Icon';
 import { Box } from '../layout';
 import { Text } from '../typography/Text';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
       children,
@@ -15,8 +16,17 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef
       colorScheme = 'blue',
       background: customBackground,
       color: customColor,
+      start,
+      startIcon,
+      startIconActive,
+      end,
+      endIcon,
+      endIconActive,
       alignItems = 'center',
+      flexDirection = 'row',
+      gap = 0.5,
       justifyContent = 'center',
+      paddingY = 0.25,
       testID = 'cds-tag'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -27,23 +37,35 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef
   } = tagEmphasisColorMap[emphasis][colorScheme];
   const backgroundColor = "rgb(" + theme.spectrum[customBackground != null ? customBackground : background] + ")";
   const color = "rgb(" + theme.spectrum[customColor != null ? customColor : foreground] + ")";
-  return /*#__PURE__*/_jsx(Box, _extends({
+  return /*#__PURE__*/_jsxs(Box, _extends({
     ref: forwardedRef,
     alignItems: alignItems,
     background: "bg",
     borderRadius: tagBorderRadiusMap[intent],
     dangerouslySetBackground: backgroundColor,
+    flexDirection: flexDirection,
+    gap: gap,
     justifyContent: justifyContent,
     paddingX: tagHorizontalSpacing[intent],
-    paddingY: 0.25,
+    paddingY: paddingY,
     testID: testID
   }, props, {
-    children: /*#__PURE__*/_jsx(Text, {
+    children: [start ? start : startIcon ? /*#__PURE__*/_jsx(Icon, {
+      active: startIconActive,
+      dangerouslySetColor: color,
+      name: startIcon,
+      size: "xs"
+    }) : null, /*#__PURE__*/_jsx(Text, {
       dangerouslySetColor: color,
       font: tagFontMap[intent],
       numberOfLines: 1,
       testID: testID + "--text",
       children: children
-    })
+    }), end ? end : endIcon ? /*#__PURE__*/_jsx(Icon, {
+      active: endIconActive,
+      dangerouslySetColor: color,
+      name: endIcon,
+      size: "xs"
+    }) : null]
   }));
 }));

package/esm/tag/__stories__/Tag.stories.js

@@ -2,8 +2,9 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import startCase from 'lodash/startCase';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons/Icon';
 import { Tag } from '../Tag';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const tagProps = {
   intent: ['informational', 'promotional'],
   emphasis: ['high', 'low'],
@@ -60,8 +61,8 @@ const tagStories = {
   }]
 };
 const TagScreen = () => {
-  return /*#__PURE__*/_jsx(ExampleScreen, {
-    children: Object.entries(tagStories).map(_ref => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [Object.entries(tagStories).map(_ref => {
       let [key, story] = _ref;
       return /*#__PURE__*/_jsx(Example, {
         inline: true,
@@ -70,7 +71,63 @@ const TagScreen = () => {
           return /*#__PURE__*/_jsx(Tag, _extends({}, props), props.children + "-" + idx);
         })
       }, key);
-    })
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "With Icons",
+      children: [/*#__PURE__*/_jsx(Tag, {
+        colorScheme: "blue",
+        startIcon: "add",
+        children: "Start icon"
+      }), /*#__PURE__*/_jsx(Tag, {
+        colorScheme: "green",
+        endIcon: "add",
+        children: "End icon"
+      }), /*#__PURE__*/_jsx(Tag, {
+        colorScheme: "purple",
+        endIcon: "add",
+        startIcon: "add",
+        children: "Both icons"
+      }), /*#__PURE__*/_jsx(Tag, {
+        colorScheme: "red",
+        endIcon: "add",
+        intent: "promotional",
+        startIcon: "add",
+        children: "Promotional with icons"
+      })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "With Custom Nodes",
+      children: [/*#__PURE__*/_jsx(Tag, {
+        colorScheme: "blue",
+        start: /*#__PURE__*/_jsx(Icon, {
+          color: "fgNegative",
+          name: "add",
+          size: "xs"
+        }),
+        children: "Custom start node"
+      }), /*#__PURE__*/_jsx(Tag, {
+        colorScheme: "green",
+        end: /*#__PURE__*/_jsx(Icon, {
+          color: "fgPositive",
+          name: "add",
+          size: "xs"
+        }),
+        children: "Custom end node"
+      }), /*#__PURE__*/_jsx(Tag, {
+        colorScheme: "purple",
+        end: /*#__PURE__*/_jsx(Icon, {
+          color: "fgNegative",
+          name: "close",
+          size: "xs"
+        }),
+        start: /*#__PURE__*/_jsx(Icon, {
+          color: "fgPositive",
+          name: "add",
+          size: "xs"
+        }),
+        children: "Both custom nodes"
+      })]
+    })]
   });
 };
 export default TagScreen;

package/package.json

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