feat(button): introduce size variant (#7348)

Author: AugustinMauroy

apps/site/components/Common/Button/index.module.css

@@ -17,6 +17,12 @@
     @apply cursor-not-allowed;
   }
 
+  &.small {
+    @apply px-3
+      py-2
+      text-sm;
+  }
+
   &.neutral {
     @apply rounded
       bg-neutral-900

apps/site/components/Common/Button/index.stories.tsx

@@ -11,6 +11,7 @@ export const Neutral: Story = {
     kind: 'neutral',
     children: 'Download Node (LTS)',
     disabled: false,
+    size: 'default',
   },
 };
 
@@ -19,6 +20,7 @@ export const Primary: Story = {
     kind: 'primary',
     children: 'Download Node (LTS)',
     disabled: false,
+    size: 'default',
   },
 };
 
@@ -27,6 +29,7 @@ export const Secondary: Story = {
     kind: 'secondary',
     children: 'Download Node (LTS)',
     disabled: false,
+    size: 'default',
   },
 };
 
@@ -35,6 +38,7 @@ export const Special: Story = {
     kind: 'special',
     children: 'Download Node (LTS)',
     disabled: false,
+    size: 'default',
   },
 };
 
@@ -48,7 +52,16 @@ export const WithIcon: Story = {
       </>
     ),
     disabled: false,
+    size: 'default',
   },
 };
 
-export default { component: Button } as Meta;
+export default {
+  component: Button,
+  argTypes: {
+    size: {
+      options: ['default', 'small'],
+      control: { type: 'radio' },
+    },
+  },
+} as Meta;

apps/site/components/Common/Button/index.tsx

@@ -14,11 +14,13 @@ import styles from './index.module.css';
 
 type ButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   kind?: 'neutral' | 'primary' | 'secondary' | 'special';
+  size?: 'default' | 'small';
   disabled?: boolean;
 };
 
 const Button: FC<ButtonProps> = ({
   kind = 'primary',
+  size = 'default',
   disabled = false,
   href = undefined,
   children,
@@ -56,7 +58,12 @@ const Button: FC<ButtonProps> = ({
       role="button"
       href={disabled ? undefined : href}
       aria-disabled={disabled}
-      className={classNames(styles.button, styles[kind], className)}
+      className={classNames(
+        styles.button,
+        styles[kind],
+        styles[size],
+        className
+      )}
       tabIndex={disabled ? -1 : 0} // Ensure focusable if not disabled
       onClick={onClickHandler}
       onKeyDown={onKeyDownHandler}