diff options
Diffstat (limited to 'packages/website/ts/@next/components/button.tsx')
-rw-r--r-- | packages/website/ts/@next/components/button.tsx | 22 |
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> ); }; |