accept icons in button component

packages/components/src/button/button.tsx

@@ -9,12 +9,10 @@ const Base = styled(Stack, {
   name: 'Button',
   accessibilityRole: 'button',
 
-  cursor: 'pointer',
   borderRadius: 12,
+  cursor: 'pointer',
   display: 'inline-flex',
-  paddingHorizontal: 16,
+  alignItems: 'center',
-  paddingTop: 7,
-  paddingBottom: 9,
   animation: 'fast',
   userSelect: 'none',
 
@@ -30,26 +28,102 @@ const Base = styled(Stack, {
         hoverStyle: { backgroundColor: '$successHover' },
         pressStyle: { backgroundColor: '$successHover' },
       },
+      outline: {
+        borderWidth: 1,
+        borderColor: '$neutral-30',
+        hoverStyle: { borderColor: '$neutral-30' },
+        pressStyle: { borderColor: '$neutral-50' },
+      },
+      ghost: {
+        backgroundColor: 'transparent',
+        hoverStyle: { backgroundColor: '$neutral-10' },
+        pressStyle: { backgroundColor: '$neutral-20' },
+      },
+    },
+
+    size: {
+      40: {
+        paddingHorizontal: 16,
+        paddingTop: 7,
+        paddingBottom: 9,
+      },
+      32: {
+        paddingHorizontal: 16,
+        paddingTop: 4,
+        paddingBottom: 6,
+      },
+    },
+
+    iconOnly: {
+      true: {
+        paddingHorizontal: 8,
+      },
+    },
+  } as const,
+})
+
+const ButtonText = styled(Paragraph, {
+  textAlign: 'center',
+  weight: 'medium',
+  display: 'inline-flex',
+  alignItems: 'center',
+  space: 4,
+
+  variants: {
+    type: {
+      primary: {
+        color: '$white-100',
+      },
+      positive: {
+        color: '$white-100',
+      },
+      outline: {
+        color: '$neutral-100',
+      },
+      ghost: {
+        color: '$neutral-100',
+      },
     },
   } as const,
 })
 
 type BaseProps = GetProps<typeof Base>
 
-type Props = {
+type Props = BaseProps & {
-  type?: BaseProps['type']
   children: string
+  icon?: React.ReactNode
+  type?: BaseProps['type']
+  size?: BaseProps['size']
+  iconAfter?: React.ReactNode
   onPress?: () => void
-} & Omit<BaseProps, 'type'>
+}
 
 const Button = (props: Props) => {
-  const { type = 'primary', children, onPress, ...rest } = props
+  const {
+    type = 'primary',
+    size = 40,
+    children,
+    onPress,
+    icon,
+    iconAfter,
+    ...rest
+  } = props
+
+  const iconOnly = !children && Boolean(icon)
 
   return (
-    <Base {...rest} type={type} onPress={onPress}>
+    <Base
-      <Paragraph color="$white-100" textAlign="center" weight="medium">
+      {...rest}
+      type={type}
+      size={size}
+      iconOnly={iconOnly}
+      onPress={onPress}
+    >
+      <ButtonText type={type}>
+        {icon}
         {children}
-      </Paragraph>
+        {iconAfter}
+      </ButtonText>
     </Base>
   )
 }