@transferwise/components 0.0.0-experimental-28a3dd5 → 0.0.0-experimental-c5e7eab

package/build/types/button/Button.types.d.ts

@@ -4,6 +4,13 @@ export type ButtonSentiment = 'default' | 'negative';
 export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
+type ButtonAddonStart = {
+    icon?: ReactNode;
+    avatars?: AvatarLayoutProps['avatars'];
+};
+type ButtonAddonEnd = {
+    icon?: ReactNode;
+};
 /**
  * Common properties for the Button component.
  */
@@ -42,24 +49,13 @@ export interface CommonProps {
      * @default default
      */
     sentiment?: ButtonSentiment;
-    /** Icon to be displayed on the left side of the button */
-    iconStart?: React.ElementType;
-    /** Icon to be displayed on the right side of the button */
-    iconEnd?: React.ElementType;
-    /** Media to be displayed on the left side of the button */
-    avatars?: AvatarLayoutProps['avatars'];
-    /** Content to be displayed inside the button */
-    children?: ReactNode;
+    /** Accessory to be displayed before the label */
     addonStart?: ButtonAddonStart;
+    /** Accessory to be displayed after the label */
     addonEnd?: ButtonAddonEnd;
+    /** Content to be displayed inside the button */
+    children?: ReactNode;
 }
-type ButtonAddonStart = {
-    icon?: React.ReactNode;
-    avatars?: AvatarLayoutProps['avatars'];
-};
-type ButtonAddonEnd = {
-    icon?: React.ReactNode;
-};
 export type ButtonElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'> & CommonProps;
 export type AnchorElementProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type' | 'disabled' | 'href' | 'className'> & CommonProps;
 export type ButtonProps = ButtonElementProps | AnchorElementProps;

package/build/types/button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,IAAI,CAAC;IAET;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IAEpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;QAEI;IACJ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;SAEK;IACL,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;SAGK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE9B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE5B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAEvC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,KAAK,gBAAgB,GAAG;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,CACzB,GACC,WAAW,CAAC;AACd,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAC3C,GACC,WAAW,CAAC;AAEd,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE,KAAK,gBAAgB,GAAG;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,IAAI,CAAC;IAET;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IAEpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;QAEI;IACJ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;SAEK;IACL,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;SAGK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,iDAAiD;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,CACzB,GACC,WAAW,CAAC;AACd,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAC3C,GACC,WAAW,CAAC;AAEd,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-28a3dd5",
+  "version": "0.0.0-experimental-c5e7eab",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,13 +91,13 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-28a3dd5",
-    "@wise/components-theming": "1.6.1"
+    "@transferwise/neptune-css": "0.0.0-experimental-c5e7eab",
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-28a3dd5",
+    "@transferwise/neptune-css": "0.0.0-experimental-c5e7eab",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/button/Button.story.tsx

@@ -1,14 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import {
-  Freeze,
-  ArrowRight,
-  ArrowLeft,
-  ArrowDiagonalDown,
-  ArrowDiagonalUp,
-  ChevronRight,
-  ChevronLeft,
-} from '@transferwise/icons';
+import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import Button from './Button.resolver';
 import type { ButtonProps, ButtonPriority } from './Button.types';
@@ -17,13 +9,6 @@ import { storyConfig } from '../test-utils';
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>
     <Story />
-    <Button v2 addonStart={{ icon: <Freeze />, avatars: [{ profileName: 'Test Test' }] }}>
-      Button
-    </Button>
-
-    <Button v2 addonEnd={{ icon: <Freeze /> }}>
-      Button
-    </Button>
   </div>
 );
 
@@ -54,9 +39,8 @@ const withComponentGrid =
  */
 const hideControls = (args: string[]) => {
   const hidden = [
-    'avatars',
-    'iconStart',
-    'iconEnd',
+    'addonStart',
+    'addonEnd',
     'onClick',
     'onBlur',
     'onFocus',
@@ -69,84 +53,72 @@ const hideControls = (args: string[]) => {
   return Object.fromEntries(hidden.map((item) => [item, { table: { disable: true } }]));
 };
 
-/**
- * SB code generation is often not ideal, rendering confusing source.
- * This helper makes icon values more understandable for the stories below.
- */
-const augmentIconProps = ({ start = 'Freeze', end = 'ArrowRight' } = {}) => ({
-  docs: {
-    source: {
-      transform(value: string): string {
-        return value
-          .replace(/iconStart=.*?\}+/g, `iconStart={${start}}`)
-          .replace(/iconEnd=.*?\}+/g, `iconEnd={${end}}`);
-      },
-    },
-  },
-});
-
 /**
  * Convenience controls for previewing rich markup,
  * not otherwise possible via Storybook
  */
 type PreviewStoryArgs = Parameters<typeof Button>[0] & {
-  previewAvatars: boolean | ButtonProps['avatars'];
-  previewIconStart: boolean | ButtonProps['iconStart'];
-  previewIconEnd: boolean | ButtonProps['iconEnd'];
+  previewAddonStart: boolean | ButtonProps['addonStart'];
+  previewAddonEnd: boolean | ButtonProps['addonEnd'];
 };
 const previewArgTypes = {
-  previewIconStart: {
-    control: 'boolean',
-    name: 'Show with `iconStart`',
+  previewAddonStart: {
+    control: 'select',
+    options: [
+      'undefined',
+      'icon',
+      'avatar: flag',
+      'avatar: initials',
+      'avatar: icon',
+      'avatar: image',
+      'avatar: double',
+    ],
+    name: 'Preview with `addonStart`',
     mapping: {
-      true: Freeze,
+      undefined,
+      icon: { icon: <Freeze /> },
+      'avatar: flag': { avatars: [{ asset: <Flag code="pl" /> }] },
+      'avatar: initials': { avatars: [{ profileName: 'Jay Jay' }] },
+      'avatar: icon': { avatars: [{ asset: <Freeze /> }] },
+      'avatar: image': { avatars: [{ imgSrc: '../avatar-square-dude.webp' }] },
+      'avatar: double': {
+        avatars: [{ asset: <Flag code="gb" /> }, { imgSrc: '../avatar-square-dude.webp' }],
+      },
     },
     table: {
       category: 'Preview options',
+      type: {
+        summary: undefined,
+      },
     },
   },
-  previewIconEnd: {
+  previewAddonEnd: {
     control: 'boolean',
-    name: 'Show with `iconEnd`',
-    mapping: {
-      true: ArrowRight,
-    },
-    table: {
-      category: 'Preview options',
-    },
-  },
-  previewAvatars: {
-    control: 'select',
-    options: ['undefined', 'flag', 'initials', 'icon', 'image', 'double'],
-    name: 'Show with Avatar',
+    name: 'Preview with `addonEnd`',
     mapping: {
-      undefined,
-      flag: [{ asset: <Flag code="pl" /> }],
-      initials: [{ profileName: 'Jay Jay' }],
-      icon: [{ asset: <Freeze /> }],
-      image: [{ imgSrc: '../avatar-square-dude.webp' }],
-      double: [{ asset: <Flag code="gb" /> }, { imgSrc: '../avatar-square-dude.webp' }],
+      true: { icon: <ArrowRight /> },
     },
     table: {
       category: 'Preview options',
+      type: {
+        summary: undefined,
+      },
     },
   },
 } as const;
 
 const getPropsForPreview = (args: PreviewStoryArgs) => {
-  const { previewAvatars, previewIconStart, previewIconEnd, ...props } = args as {
-    previewAvatars: ButtonProps['avatars'];
-    previewIconStart: ButtonProps['iconStart'];
-    previewIconEnd: ButtonProps['iconEnd'];
+  const { previewAddonStart, previewAddonEnd, ...props } = args as {
+    previewAddonStart: ButtonProps['addonStart'];
+    previewAddonEnd: ButtonProps['addonEnd'];
     props: typeof Button;
   };
 
   return [
     props,
     {
-      avatars: previewAvatars,
-      iconStart: previewIconStart,
-      iconEnd: previewIconEnd,
+      addonStart: previewAddonStart,
+      addonEnd: previewAddonEnd,
     },
   ];
 };
@@ -221,13 +193,10 @@ const meta: Meta<typeof Button> = {
       },
       description: 'If set, the component will render as an HTML anchor.',
     },
-    iconStart: {
+    addonStart: {
       control: 'object',
     },
-    iconEnd: {
-      control: 'object',
-    },
-    avatars: {
+    addonEnd: {
       control: 'object',
     },
     type: {
@@ -252,9 +221,8 @@ const meta: Meta<typeof Button> = {
     href: undefined,
     as: undefined,
     type: undefined,
-    iconStart: undefined,
-    iconEnd: undefined,
-    avatars: undefined,
+    addonStart: undefined,
+    addonEnd: undefined,
     className: undefined,
     onClick: fn(),
     children: 'Button text',
@@ -279,9 +247,8 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     onKeyDown: fn(),
     onMouseEnter: fn(),
     onMouseLeave: fn(),
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: false,
+    previewAddonStart: false,
+    previewAddonEnd: false,
   },
   argTypes: {
     onClick: { table: { disable: true } },
@@ -326,12 +293,10 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
     ...previewArgTypes,
   },
   args: {
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: false,
+    previewAddonStart: false,
+    previewAddonEnd: false,
   },
   decorators: [withComponentGrid('30rem')],
-  parameters: augmentIconProps(),
 };
 
 /**
@@ -365,9 +330,8 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
     ...previewArgTypes,
   },
   args: {
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: false,
+    previewAddonStart: false,
+    previewAddonEnd: false,
   },
   decorators: [withComponentGrid()],
 };
@@ -399,9 +363,8 @@ export const Size: StoryObj<PreviewStoryArgs> = {
     ...previewArgTypes,
   },
   args: {
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: false,
+    previewAddonStart: false,
+    previewAddonEnd: false,
   },
   decorators: [withComponentGrid()],
 };
@@ -426,9 +389,8 @@ export const AsAnchor: StoryObj<PreviewStoryArgs> = {
   args: {
     as: 'a',
     href: 'https://wise.com',
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: false,
+    previewAddonStart: false,
+    previewAddonEnd: false,
     onClick: undefined,
   },
 };
@@ -449,9 +411,8 @@ export const Disabled: StoryObj<PreviewStoryArgs> = {
   },
   args: {
     disabled: true,
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: false,
+    previewAddonStart: false,
+    previewAddonEnd: false,
   },
 };
 
@@ -471,9 +432,8 @@ export const Loading: StoryObj<PreviewStoryArgs> = {
   },
   args: {
     loading: true,
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: false,
+    previewAddonStart: false,
+    previewAddonEnd: false,
   },
 };
 
@@ -496,9 +456,8 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
   },
   args: {
     block: true,
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: false,
+    previewAddonStart: false,
+    previewAddonEnd: false,
   },
 };
 
@@ -512,15 +471,15 @@ export const WithIcons: StoryObj<PreviewStoryArgs> = {
 
     return (
       <>
-        <Button {...props} iconStart={Freeze}>
+        <Button {...props} addonStart={{ icon: <Freeze /> }}>
           With start icon
         </Button>
 
-        <Button {...props} iconEnd={ArrowRight}>
+        <Button {...props} addonEnd={{ icon: <ArrowRight /> }}>
           With end icon
         </Button>
 
-        <Button {...props} iconStart={Freeze} iconEnd={ArrowRight}>
+        <Button {...props} addonStart={{ icon: <Freeze /> }} addonEnd={{ icon: <ArrowRight /> }}>
           With both icons
         </Button>
       </>
@@ -532,7 +491,27 @@ export const WithIcons: StoryObj<PreviewStoryArgs> = {
   args: {
     size: 'md',
   },
-  parameters: augmentIconProps(),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<>
+  <Button size="md" addonStart={{ icon: <Freeze /> }}>
+    With start icon
+  </Button>
+  
+  <Button size="md" addonEnd={{ icon: <ArrowRight /> }}>
+    With end icon
+  </Button>
+  
+  <Button size="md" addonStart={{ icon: <Freeze /> }} addonEnd={{ icon: <ArrowRight /> }}>
+    With both icons
+  </Button>
+</>
+        `,
+      },
+    },
+  },
   decorators: [withComponentGrid()],
 };
 
@@ -546,19 +525,22 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
 
     return (
       <>
-        <Button {...props} avatars={[{ asset: <Freeze /> }]}>
+        <Button {...props} addonStart={{ avatars: [{ asset: <Freeze /> }] }}>
           With single avatar
         </Button>
 
-        <Button {...props} avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}>
+        <Button
+          {...props}
+          addonStart={{ avatars: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }] }}
+        >
           With double avatar
         </Button>
 
-        <Button {...props} avatars={[{ profileName: 'John Doe' }]}>
+        <Button {...props} addonStart={{ avatars: [{ profileName: 'John Doe' }] }}>
           With initials
         </Button>
 
-        <Button {...props} avatars={[{ imgSrc: '../avatar-square-dude.webp' }]}>
+        <Button {...props} addonStart={{ avatars: [{ imgSrc: '../avatar-square-dude.webp' }] }}>
           With an image
         </Button>
       </>
@@ -567,25 +549,25 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
   argTypes: hideControls(['href', 'target', 'priority', 'sentiment', 'as', 'disabled', 'children']),
   args: {
     size: 'md',
-    avatars: [],
+    addonStart: {},
   },
   parameters: {
     docs: {
       source: {
         code: `
 <>
-  <Button v2 size="md" avatars={[{ asset: <Freeze /> }]}>
+  <Button v2 size="md" addonStart={{ avatars: [{ asset: <Freeze /> }]}}>
     With single avatar
   </Button>
-  
+
   <Button v2 size="md" avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}>
     With double avatar
   </Button>
-  
+
   <Button v2 size="md" avatars={[{ profileName: 'John Doe' }]}>
     With initials
   </Button>
-  
+
   <Button v2 size="md" avatars={[{ imgSrc: '../avatar-square-dude.webp' }]}>
     With image Avatar
   </Button>
@@ -598,17 +580,17 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
 };
 
 /**
- * Avatar will always take precedence over `iconStart`
+ * Avatar will always take precedence over an icon for `addonStart`
  */
 export const WithAvatarAndIcon: Story = {
   args: {
     size: 'md',
-    iconStart: Freeze,
-    avatars: [{ profileName: 'John Doe' }],
-    iconEnd: ArrowRight,
+    addonStart: {
+      avatars: [{ profileName: 'John Doe' }],
+      icon: <ArrowRight />,
+    },
   },
   argTypes: hideControls(['href', 'target', 'as', 'children']),
-  parameters: augmentIconProps(),
 };
 
 const buttonPriorities = ['primary', 'secondary', 'tertiary', 'minimal'] as const;
@@ -635,9 +617,8 @@ export const AllVariants = storyConfig(
                 v2
                 priority={priority as ButtonPriority}
                 size={size}
-                iconStart={ArrowLeft}
-                iconEnd={ArrowRight}
-                avatars={[{ asset: <Freeze /> }]}
+                addonStart={{ avatars: [{ asset: <Freeze /> }] }}
+                addonEnd={{ icon: <ArrowRight /> }}
                 block
                 href="https://wise.com"
                 target="_blank"
@@ -649,9 +630,8 @@ export const AllVariants = storyConfig(
                 v2
                 priority={priority as ButtonPriority}
                 size={size}
-                iconStart={ArrowLeft}
-                iconEnd={ArrowRight}
-                avatars={[{ asset: <Freeze /> }, { asset: <Freeze /> }]}
+                addonStart={{ avatars: [{ asset: <Freeze /> }, { asset: <Freeze /> }] }}
+                addonEnd={{ icon: <ArrowRight /> }}
                 block
                 disabled
               >
@@ -661,9 +641,8 @@ export const AllVariants = storyConfig(
                 v2
                 priority={priority as ButtonPriority}
                 size={size}
-                iconStart={ArrowLeft}
-                iconEnd={ArrowRight}
-                avatars={[{ asset: <Freeze /> }]}
+                addonStart={{ avatars: [{ asset: <Freeze /> }] }}
+                addonEnd={{ icon: <ArrowRight /> }}
                 block
                 loading
               >
@@ -683,9 +662,8 @@ export const AllVariants = storyConfig(
                 sentiment="negative"
                 priority={priority as ButtonPriority}
                 size={size}
-                iconStart={ChevronLeft}
-                iconEnd={ChevronRight}
-                avatars={[{ asset: <Freeze /> }]}
+                addonEnd={{ icon: <ChevronRight /> }}
+                addonStart={{ avatars: [{ asset: <Freeze /> }] }}
                 block
                 href="https://wise.com"
                 target="_blank"
@@ -698,9 +676,8 @@ export const AllVariants = storyConfig(
                 sentiment="negative"
                 priority={priority as ButtonPriority}
                 size={size}
-                iconStart={ChevronLeft}
-                iconEnd={ChevronRight}
-                avatars={[{ asset: <Freeze /> }]}
+                addonEnd={{ icon: <ChevronRight /> }}
+                addonStart={{ avatars: [{ asset: <Freeze /> }] }}
                 block
                 disabled
               >
@@ -711,9 +688,8 @@ export const AllVariants = storyConfig(
                 sentiment="negative"
                 priority={priority as ButtonPriority}
                 size={size}
-                iconStart={ChevronLeft}
-                iconEnd={ChevronRight}
-                avatars={[{ asset: <Freeze /> }]}
+                addonEnd={{ icon: <ChevronRight /> }}
+                addonStart={{ avatars: [{ asset: <Freeze /> }] }}
                 block
                 loading
               >

package/src/button/Button.types.ts

@@ -1,5 +1,4 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
-import type { PrimitiveButtonProps, PrimitiveAnchorProps } from '../primitives';
 import type { AvatarLayoutProps } from '../avatarLayout';
 
 export type ButtonSentiment = 'default' | 'negative';
@@ -7,6 +6,15 @@ export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
 
+type ButtonAddonStart = {
+  icon?: ReactNode;
+  avatars?: AvatarLayoutProps['avatars'];
+};
+
+type ButtonAddonEnd = {
+  icon?: ReactNode;
+};
+
 /**
  * Common properties for the Button component.
  */
@@ -55,31 +63,16 @@ export interface CommonProps {
    */
   sentiment?: ButtonSentiment;
 
-  /** Icon to be displayed on the left side of the button */
-  iconStart?: React.ElementType;
-
-  /** Icon to be displayed on the right side of the button */
-  iconEnd?: React.ElementType;
+  /** Accessory to be displayed before the label */
+  addonStart?: ButtonAddonStart;
 
-  /** Media to be displayed on the left side of the button */
-  avatars?: AvatarLayoutProps['avatars'];
+  /** Accessory to be displayed after the label */
+  addonEnd?: ButtonAddonEnd;
 
   /** Content to be displayed inside the button */
   children?: ReactNode;
-
-  addonStart?: ButtonAddonStart;
-  addonEnd?: ButtonAddonEnd;
 }
 
-type ButtonAddonStart = {
-  icon?: React.ReactNode;
-  avatars?: AvatarLayoutProps['avatars'];
-};
-
-type ButtonAddonEnd = {
-  icon?: React.ReactNode;
-};
-
 export type ButtonElementProps = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
   'disabled' | 'className'

package/src/button/LegacyButton.story.tsx

@@ -61,17 +61,12 @@ const meta: Meta<typeof Button> = {
         disable: true,
       },
     },
-    iconStart: {
+    addonStart: {
       table: {
         disable: true,
       },
     },
-    iconEnd: {
-      table: {
-        disable: true,
-      },
-    },
-    avatars: {
+    addonEnd: {
       table: {
         disable: true,
       },