From 12b0e9d715c56c72cb150fc578a81a79a214b2fc Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Wed, 6 Apr 2022 10:34:50 +0200
Subject: [PATCH] feat(system): add small size button variant

---
 packages/status-react/src/system/button/button.tsx | 1 +
 packages/status-react/src/system/button/styles.tsx | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/status-react/src/system/button/button.tsx b/packages/status-react/src/system/button/button.tsx
index 5441c4a..2c87df4 100644
--- a/packages/status-react/src/system/button/button.tsx
+++ b/packages/status-react/src/system/button/button.tsx
@@ -14,6 +14,7 @@ interface Props {
   type?: ButtonProps['type']
   onClick?: ButtonProps['onClick']
   variant?: Variants['variant']
+  size?: Variants['size']
 }
 
 const Button = (props: Props, ref: Ref<HTMLButtonElement>) => {
diff --git a/packages/status-react/src/system/button/styles.tsx b/packages/status-react/src/system/button/styles.tsx
index cf81f3b..6a7d326 100644
--- a/packages/status-react/src/system/button/styles.tsx
+++ b/packages/status-react/src/system/button/styles.tsx
@@ -9,11 +9,12 @@ export const Base = styled('button', {
   fontFamily: '$sans',
   fontWeight: '$500',
   fontSize: '15px',
+  lineHeight: 1.4,
   position: 'relative',
   display: 'inline-flex',
   justifyContent: 'center',
   alignItems: 'center',
-  padding: '11px 24px',
+  padding: '12px 24px',
   borderRadius: '$8',
   transitionProperty: 'background-color, border-color, color, fill, stroke',
   transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
@@ -52,6 +53,12 @@ export const Base = styled('button', {
         },
       },
     },
+    size: {
+      small: {
+        fontSize: '13px',
+        padding: '10px 12px',
+      },
+    },
     loading: {
       true: {},
     },