#### Source

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

export const Button: FC<ButtonProps> = ({
	children,
	size,
	testId,
	weight,
	...rest
}) => {
	return (
		<S.Button data-testid={testId} {...{ ...rest, size }}>
			{children && (
				<Text
					testId={`${testId}-text`}
					block
					size={buttonTextSizeDecorator(size)}
					weight={weight}>
					{children}
				</Text>
			)}
		</S.Button>
	);
};

Button.defaultProps = {
	background: '#851bb7',
	elevation: 4,
	size: 'medium',
	testId: 'button',
	variant: 'regular',
};

export default Button;
```

```jsx static
// styles/index.ts
import styled from 'styled-components';
import { ButtonProps } from 'types';
import {
	link,
	outlined,
	regular,
	round,
	roundOutlined,
	unstyled,
} from './variants';

const applyVariantStyling = (props: ButtonProps) => {
	switch (props.variant) {
		case 'unstyled':
			return unstyled;
		case 'round':
			return round(props);
		case 'roundOutlined':
			return roundOutlined(props);
		case 'link':
			return link(props);
		case 'outlined':
			return outlined(props);
		case 'regular':
		default:
			return regular(props);
	}
};

export const Button = styled.button<ButtonProps>`
	${props => applyVariantStyling(props)}
`;
```

#### Variants

```jsx padded
<Button mr={2} variant="regular">Push Me</Button>
<Button mr={2} variant="link">Push Me</Button>
<Button mr={2} variant="round">Push Me</Button>
<Button mr={2} variant="outlined" weight="bold">Push Me</Button>
<Button mr={2} variant="roundOutlined" weight="bold">Push Me</Button>
<Button mr={2} variant="unstyled">Push Me</Button>
```

#### Sizes

```jsx padded
<Button mr={2} size="small">Push Me</Button>
<Button mr={2}>Push Me</Button>
<Button mr={2} size="large">Push Me</Button>
```

```jsx padded
<Button mr={2} background="#ff0000">Push Me</Button>
<Button mr={2} background="#ffff00">Push Me</Button>
<Button mr={2} background="#00ff00">Push Me</Button>
<Button mr={2} background="#00ffff">Push Me</Button>
<Button mr={2} background="#0000ff">Push Me</Button>
<Button mr={2} background="#ff00ff">Push Me</Button>
```