#### Source

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

export const CloseButton: FC<CloseButtonProps> = props => {
	const { color } = props;
	return (
		<S.CloseButton {...props}>
			<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
				<path
					d="M2.06412 2.06006L30.3484 30.3443M1.6499 30.3443L29.9342 2.06006"
					stroke={color}
					strokeWidth="4"
					strokeLinecap="round"
					strokeLinejoin="round"
				/>
			</svg>
		</S.CloseButton>
	);
};

CloseButton.defaultProps = {
	background: 'transparent',
	color: '#000000',
	elevation: 2,
};

export default CloseButton;
```

```jsx static
// styles.ts
import styled, { css } from 'styled-components';
import { CloseButtonProps } from 'types';
import { elevationDecorator, squareSizeDecorator } from 'utils';

export const colorDecorator = ({ background, color }: CloseButtonProps) => css`
	background: ${background};
	border: 1px solid ${color};
`;

export const CloseButton =
	styled.button <
	CloseButtonProps >
	`
	align-items: center;
	border-radius: 50%;
	display: flex;
	height: 1rem;
	justify-content: center;
	padding: 0.5rem;
	transition: transform 0.1s ease-in-out;
	width: 1rem;
	:hover {
		transform: translateY(-0.125rem);
	}
	:active {
		transform: translateY(0.125rem);
	}
	${props => colorDecorator(props)}
	${props => elevationDecorator(props)}
	${props => squareSizeDecorator(props)}
`;
```

#### Standard Use

```jsx padded
<>
	<CloseButton color="#851bb7" size={4} />
</>
```