feat: Create a button component

src/components/Button.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './Button.module.scss';
+
+const Button = ({
+  as: Component = 'button',
+  children,
+  className,
+  variant,
+  ...props
+}) => (
+  <Component
+    {...props}
+    className={cx(className, styles.button, styles[variant])}
+  >
+    {children}
+  </Component>
+);
+
+Button.VARIANT = {
+  PRIMARY: 'primary',
+  NORMAL: 'normal',
+};
+
+Button.propTypes = {
+  as: PropTypes.elementType,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  variant: PropTypes.oneOf(Object.values(Button.VARIANT)).isRequired,
+};
+
+export default Button;

src/components/Button.module.scss

@@ -0,0 +1,25 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 3px;
+  font-family: var(--primary-font-family);
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+}
+
+.primary {
+  color: #fff;
+  border-color: var(--color-brand-800);
+  background-color: var(--color-brand-800);
+}
+
+.normal {
+  color: var(--color-neutrals-800);
+  border-color: var(--color-neutrals-100);
+  background-color: var(--color-neutrals-100);
+}