From a842554cac8dfd70b27698d8eda2f2e3bcd387a1 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 31 May 2025 15:10:16 +0100
Subject: [PATCH] Update default size on IconButton

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/eight-pigs-post.md                 |  5 ++++
 .../IconButton/IconButton.stories.tsx         | 27 +++++++------------
 .../src/components/IconButton/IconButton.tsx  |  2 +-
 3 files changed, 16 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/eight-pigs-post.md

diff --git a/.changeset/eight-pigs-post.md b/.changeset/eight-pigs-post.md
new file mode 100644
index 0000000000..8e50cc7707
--- /dev/null
+++ b/.changeset/eight-pigs-post.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+We set the default size for IconButton in Canon to be small instead of medium.
diff --git a/packages/canon/src/components/IconButton/IconButton.stories.tsx b/packages/canon/src/components/IconButton/IconButton.stories.tsx
index d16dcd1fcb..7a7272ad05 100644
--- a/packages/canon/src/components/IconButton/IconButton.stories.tsx
+++ b/packages/canon/src/components/IconButton/IconButton.stories.tsx
@@ -34,29 +34,23 @@ const meta = {
       options: ['primary', 'secondary'],
     },
   },
-  args: {
-    size: 'medium',
-    variant: 'primary',
-  },
 } satisfies Meta<typeof IconButton>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Variants: Story = {
+export const Default: Story = {
   args: {
     icon: <Icon name="cloud" />,
-    'aria-label': 'Cloud icon button',
   },
-  parameters: {
-    argTypes: {
-      variant: {
-        control: false,
-      },
-    },
+};
+
+export const Variants: Story = {
+  args: {
+    ...Default.args,
   },
   render: args => (
-    <Flex align="center">
+    <Flex align="center" gap="2">
       <IconButton {...args} variant="primary" />
       <IconButton {...args} variant="secondary" />
     </Flex>
@@ -66,12 +60,11 @@ export const Variants: Story = {
 export const Sizes: Story = {
   args: {
     icon: <Icon name="cloud" />,
-    'aria-label': 'Cloud icon button',
   },
   render: args => (
-    <Flex align="center">
-      <IconButton {...args} size="medium" />
+    <Flex align="center" gap="2">
       <IconButton {...args} size="small" />
+      <IconButton {...args} size="medium" />
     </Flex>
   ),
 };
@@ -83,7 +76,7 @@ export const Disabled: Story = {
     'aria-label': 'Cloud icon button',
   },
   render: args => (
-    <Flex direction="row" gap="4">
+    <Flex direction="row" gap="2">
       <IconButton {...args} variant="primary" />
       <IconButton {...args} variant="secondary" />
     </Flex>
diff --git a/packages/canon/src/components/IconButton/IconButton.tsx b/packages/canon/src/components/IconButton/IconButton.tsx
index bca012cac0..fd80c91ddd 100644
--- a/packages/canon/src/components/IconButton/IconButton.tsx
+++ b/packages/canon/src/components/IconButton/IconButton.tsx
@@ -24,7 +24,7 @@ import type { IconButtonProps } from './types';
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (props: IconButtonProps, ref) => {
     const {
-      size = 'medium',
+      size = 'small',
       variant = 'primary',
       icon,
       className,