fix: some details

src/components/Button/index.tsx

@@ -7,8 +7,9 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   children: ReactNode
   colorSchema?: ButtonVariantProps['colorSchema']
   styleSchema?: ButtonVariantProps['styleSchema']
+  size?: ButtonVariantProps['size']
   font?: ButtonVariantProps['font']
-  outline?: ButtonVariantProps['outline']
+  outline?: boolean
 }
 
 export function Button({ children, ...rest }: ButtonProps) {

src/components/Button/styles.ts

@@ -38,10 +38,9 @@ export const Wrapper = styled('button', {
   alignItems: 'center',
   justifyContent: 'center',
   width: '100%',
-  height: '3rem',
+  padding: '0 1rem',
   borderWidth: '2.5px',
   borderStyle: 'solid',
-  fontSize: '1rem',
   fontWeight: 500,
   cursor: 'pointer',
   transition: 'all 0.25s ease-in-out',
@@ -84,6 +83,17 @@ export const Wrapper = styled('button', {
       }
     },
 
+    size: {
+      small: {
+        height: '2rem',
+        fontSize: '0.875rem'
+      },
+      medium: {
+        height: '3rem',
+        fontSize: '1rem'
+      }
+    },
+
     font: {
       baloo: {
         fontFamily: theme.fonts.baloo
@@ -199,6 +209,7 @@ export const Wrapper = styled('button', {
   defaultVariants: {
     colorSchema: 'teal',
     styleSchema: 'pill',
+    size: 'medium',
     font: 'roboto',
     outline: false
   }