fix(BBButton): make size resize circle and squared layouts

src/components/Button/component.stories.tsx

@@ -55,7 +55,7 @@ const meta = {
     size: {
       control: 'select',
       options: SIZE_VALUES,
-      description: `Button size. Allowed values: ${SIZE_VALUES.join(', ')}. Note: size affects padding and, for \`circle\` layout, the overall diameter.`,
+      description: `Button size. Allowed values: ${SIZE_VALUES.join(', ')}. Note: size affects padding and, for \`circle\`/\`squared\` layouts, the overall box size (both render at the same size).`,
       table: { defaultValue: { summary: `${DEFAULT_SIZE}` } },
     },
     layout: {
@@ -323,6 +323,44 @@ export const AllSizes: Story = {
   ),
 };
 
+/** Renders the icon-only `circle` and `squared` layouts across every available `size`, showing that both render at the same box size for a given `size`. */
+export const IconOnlySizes: Story = {
+  name: 'Icon-Only Layout Sizes',
+  args: {
+    variant: 'primary',
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        {SIZE_VALUES.map((size) => (
+          <BBButton
+            {...args}
+            key={`circle-${size}`}
+            layout="circle"
+            size={size}
+            icon={<MdFavorite size="1.25rem" />}
+            ariaLabel={`Circle ${size}`}
+            tooltipLabel={`Circle ${size}`}
+          />
+        ))}
+      </div>
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        {SIZE_VALUES.map((size) => (
+          <BBButton
+            {...args}
+            key={`squared-${size}`}
+            layout="squared"
+            size={size}
+            icon={<MdFavorite size="1.25rem" />}
+            ariaLabel={`Squared ${size}`}
+            tooltipLabel={`Squared ${size}`}
+          />
+        ))}
+      </div>
+    </div>
+  ),
+};
+
 /** Shows the button in its disabled state. */
 export const Disabled: Story = {
   args: {

src/components/Button/constants.ts

@@ -15,7 +15,9 @@ import {
   colorGray,
   colorBrandAux,
 } from '../../stylesheets/palette';
-import { spacingMedium, spacingSmall, spacingSmallMedium } from '../../stylesheets/sizing';
+import {
+  spacingSmall, spacingSmallMedium, spacingMedium, spacingXLarge, spacingXXLarge,
+} from '../../stylesheets/sizing';
 import { CSSColorPropertiesType, CSSSizePropertiesType, EssentialColorProperties } from './type';
 
 const VARIANTS = {
@@ -193,9 +195,11 @@ const CSS_COLOR_PROPERTIES_DISABLED: EssentialColorProperties = {
 const CSS_SIZE_PROPERTIES: CSSSizePropertiesType = {
   sm: {
     padding: `${spacingSmall} ${spacingSmallMedium}`,
+    iconBoxSize: spacingXLarge,
   },
   md: {
-    padding: spacingMedium
+    padding: spacingMedium,
+    iconBoxSize: spacingXXLarge,
   },
 };
 

src/components/Button/styles.ts

@@ -119,27 +119,30 @@ const stackedLayoutStyles = css`
   align-items: center;
 `;
 
-const circleLayoutStyles = css`
-  border-radius: 50%;
-  width: 3rem;
-  height: 3rem;
+// Shared by `circle` and `squared`: both are icon-only, fixed-box layouts that
+// must render at the same width/height for a given `size` — they differ only
+// in border-radius (round vs. slightly rounded square).
+const iconOnlyBoxStyles = css<StyledButtonProps>`
+  ${({ $size }) => {
+    const safeSize = $size ?? DEFAULT_SIZE;
+    const { iconBoxSize } = CSS_SIZE_PROPERTIES[safeSize] ?? CSS_SIZE_PROPERTIES[DEFAULT_SIZE];
+    return `width: ${iconBoxSize}; height: ${iconBoxSize};`;
+  }}
   aspect-ratio: 1;
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
 `;
 
-// Icon-only, sized by its own (equal, non-text) padding rather than a fixed
-// box — stays compact next to a single line of text instead of forcing a
-// fixed height like circle/stacked do.
-const squaredLayoutStyles = css`
+const circleLayoutStyles = css<StyledButtonProps>`
+  ${iconOnlyBoxStyles}
+  border-radius: 50%;
+`;
+
+const squaredLayoutStyles = css<StyledButtonProps>`
+  ${iconOnlyBoxStyles}
   border-radius: ${borderRadiusSmall};
-  aspect-ratio: 1;
-  padding: ${spacingSmall};
-  display: flex;
-  justify-content: center;
-  align-items: center;
 `;
 
 const defaultLayoutStyles = css`

src/components/Button/type.ts

@@ -30,6 +30,7 @@ export type CSSColorPropertiesType = {
 
 export type SizeProperties = {
   padding: string;
+  iconBoxSize: string;
 }
 
 export type CSSSizePropertiesType = {
@@ -97,7 +98,7 @@ type BaseButtonProps = {
   /** Visual variant controlling emphasis and background/border styling. @default 'primary' */
   variant?: VariantType;
 
-  /** Button size; affects padding and, for the `circle` layout, the overall diameter. @default 'md' */
+  /** Button size; affects padding and, for the `circle`/`squared` layouts, the overall box size (both render at the same size). @default 'md' */
   size?: SizeType;
 
   /** Disables interaction and applies disabled styling. @default false */

src/stylesheets/sizing.ts

@@ -8,6 +8,7 @@ export const spacingMedium = '1rem';          // 16px
 export const spacingMediumLarge = '1.25rem';  // 20px
 export const spacingLarge = '1.5rem';         // 24px
 export const spacingXLarge = '2rem';          // 32px
+export const spacingXXLarge = '3rem';         // 48px
 
 // Border sizes
 export const borderRadiusDefault = '1rem';    //16px