Adds withArrow button

1 files changed, 20 insertions, 2 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index fa830f42c..c532b0720 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -10,6 +10,7 @@ interface ButtonInterface {
     isTransparent?: boolean;
     isNoBorder?: boolean;
     isNoPadding?: boolean;
+    isWithArrow?: boolean;
     hasIcon?: boolean | string;
     isInline?: boolean;
     href?: string;
@@ -24,13 +25,21 @@ export const Button = styled.button<ButtonInterface>`
     border: 1px solid transparent;
     display: ${props => props.isInline && 'inline-block'};
     background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
-    border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'};
+    border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'};
     color: ${props => props.color || props.theme.textColor};
     padding: ${props => !props.isNoPadding && '18px 30px'};
     text-align: center;
-    font-size: 18px;
+    font-size: ${props => props.isWithArrow ? '20px' : '18px'};
     text-decoration: none;
 
+    svg {
+        margin-left: 12px;
+    }
+
+    path {
+        fill: ${props => props.color || props.theme.textColor};
+    }
+
     @media (max-width: 768px) {
         padding: ${props => !props.isNoPadding && '6% 10%'};
     }
@@ -40,12 +49,21 @@ export const Link = (props: ButtonInterface) => {
     const {
         children,
         href,
+        isWithArrow,
     } = props;
     const Component = Button.withComponent(ReactRouterLink);
 
     return (
         <Component to={href} {...props}>
             {children}
+
+            { isWithArrow &&
+                <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
+                    />
+                </svg>
+            }
         </Component>
     );
 };