From e08fe0d9ab4a6db17f0d171efa88b58153a23e67 Mon Sep 17 00:00:00 2001
From: CarolineVP <caroline_pujebet@hotmail.com>
Date: Tue, 29 Nov 2022 15:50:10 +0100
Subject: [PATCH] feat(Button): add size `tiny`

---
 src/Button/Button.interface.ts |  5 +++++
 src/Button/Button.style.ts     | 11 +++++++++++
 src/Button/Button.tsx          |  2 ++
 3 files changed, 18 insertions(+)

diff --git a/src/Button/Button.interface.ts b/src/Button/Button.interface.ts
index c4e6c3d7f..a1c1668ab 100644
--- a/src/Button/Button.interface.ts
+++ b/src/Button/Button.interface.ts
@@ -63,6 +63,11 @@ export interface ButtonProps
    */
   small?: boolean
 
+  /**
+   * Tiny size
+   */
+  tiny?: boolean
+
   /**
    * @ignore
    */
diff --git a/src/Button/Button.style.ts b/src/Button/Button.style.ts
index 943701395..7c48d06c3 100644
--- a/src/Button/Button.style.ts
+++ b/src/Button/Button.style.ts
@@ -77,6 +77,17 @@ export const ButtonContainer = styled.button`
     }
   }
 
+  &[data-tiny='true'] {
+    font-size: ${fontScale.asteroid.size}px;
+    padding: 0 12px;
+    --button-height: 36px;
+    --button-side-element-margin: 8px;
+
+    & ${SideElementContainer} {
+      font-size: 20px;
+    }
+  }
+
   &[data-mode='${ButtonModes.solid}'] {
     background-color: ${theme.color('primary', { dynamic: true })};
     color: ${theme.color('primary', {
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index b48ac90ef..42a705250 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -20,6 +20,7 @@ const InnerButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
       ghost = false,
       link = false,
       small = false,
+      tiny = false,
       fullWidth = false,
       dangerouslySetInnerHTML,
       type = 'button',
@@ -49,6 +50,7 @@ const InnerButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
         data-loading={loading}
         data-mode={mode}
         data-small={small}
+        data-tiny={tiny}
         data-full-width={fullWidth}
         type={type}
         {...rest}