#### Source

```jsx static
// index.tsx
import React, { FC, useMemo } from 'react';
import { LinkProps, LinkVariants } from 'types';
import { buttonTextSizeDecorator } from 'utils';
import Text from '../Text';
import * as S from './styles';

const isBlock = (variant?: LinkVariants) =>
	variant === 'button' || variant === 'outlinedButton';

export const Link: FC<LinkProps> = ({
	children,
	external,
	size,
	testId,
	textSize,
	variant,
	weight,
	...rest
}) => {
	const Component = useMemo(() => (external ? S.ExternalLink : S.Link), [
		external,
	]);
	const block = useMemo(() => isBlock(variant), [variant]);
	const parsedTextSize = useMemo(
		() => (isBlock(variant) ? buttonTextSizeDecorator(size) : textSize),
		[size, textSize, variant]
	);
	return (
		<Component data-testid={testId} {...{ ...rest, size, variant }}>
			{children && (
				<Text
					block={block}
					size={parsedTextSize}
					testId={`${testId}-text`}
					weight={weight}>
					{children}
				</Text>
			)}
		</Component>
	);
};

Link.defaultProps = {
	background: '#851bb7',
	elevation: 4,
	external: true,
	size: 'medium',
	testId: 'link',
	to: '#',
	variant: 'regular',
};

export default Link;
```

```jsx static
// styles/index.ts
import styled from 'styled-components';
import { Link as RouterLink } from 'react-router-dom';
import { LinkProps } from 'types';
import {
	button,
	outlinedButton,
	regular,
	roundButton,
	roundOutlinedButton,
	unstyled,
} from './variants';

const applyVariantStyling = (props: LinkProps) => {
	switch (props.variant) {
		case 'unstyled':
			return unstyled;
		case 'roundButton':
			return roundButton(props);
		case 'roundOutlinedButton':
			return roundOutlinedButton(props);
		case 'outlinedButton':
			return outlinedButton(props);
		case 'button':
			return button(props);
		case 'regular':
		default:
			return regular(props);
	}
};

export const ExternalLink = styled.a.attrs((props: LinkProps) => ({
	href: props.to,
}))<LinkProps>`
	${props => applyVariantStyling(props)}
`;

export const Link = styled(RouterLink)<LinkProps>`
	${props => applyVariantStyling(props)}
`;
```

#### Variants

```jsx padded
<Link to="#/UI-Components?id=link" mr={2} variant="regular">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} variant="button">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} variant="roundButton">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} variant="outlinedButton" weight="bold">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} variant="roundOutlinedButton" weight="bold">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} variant="unstyled">Push Me</Link>
```

#### Button Sizes

```jsx padded
<Link to="#/UI-Components?id=link" mr={2} size="small" variant="button">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} size="medium" variant="outlinedButton" weight="bold">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} size="large" variant="button">Push Me</Link>
```

#### Underline Color

```jsx padded
<Link to="#/UI-Components?id=link" mr={2} background="#ff0000">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} background="#ffff00">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} background="#00ff00">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} background="#00ffff">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} background="#0000ff">Push Me</Link>
<Link to="#/UI-Components?id=link" mr={2} background="#ff00ff">Push Me</Link>
```