Upd Button component to use scss module and generate classNames

src/components/Button.module.scss

@@ -0,0 +1,48 @@
+.button {
+	-webkit-appearance: none;
+	border: 1px solid transparent;
+	background: transparent;
+	padding: 0;
+	display: inline-block;
+	border-radius: 2px;
+	text-align: center;
+	line-height: 1;
+	text-decoration: none;
+	/* setting some defaults for the type, but mostly should come from text components */
+	font: 400 16px/1 'Source Sans Pro', Arial, sans-serif;
+	transition: background-color 0.1s, border-color 0.1s, color 0.1s;
+
+	// @include button-text-states(
+	// 	#2e9adf,
+	// 	#275E8B,
+	// 	#205177,
+	// 	#69ADD8
+	// );
+
+	&:focus {
+		outline: none;
+	}
+
+	// @include button-focus(scale-color(#2e9adf, $alpha: -70%));
+}
+
+
+/*
+	Width
+*/
+
+.wide {
+	display: block;
+	width: 100%;
+}
+.wide-mobile {
+	display: block;
+	width: 100%;
+
+	@media(min-width: 600px) {
+		display: inline-block;
+		width: auto;
+	};
+}
+
+

src/components/Button.tsx

@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react';
-
+import styles from './Button.module.scss';
+import { classNames } from '../utilities/css';
 export type Type = 'default' | 'action';
 
 interface Props {
@@ -10,14 +11,20 @@ interface Props {
   onClick?: () => void;
 
   /**
-   * Button type yo
+   * Button type
    */
   type?: Type;
+  fullWidth?: boolean;
 }
 
-const Button: FunctionComponent<Props> = ({ children, type = 'default', onClick }) => {
+const Button: FunctionComponent<Props> = ({ children, type = 'default', onClick, fullWidth = true }) => {
+  const className = classNames(
+    styles.button,
+    fullWidth && styles.wide,
+  );
+
   return (
-    <button type="button" onClick={onClick}>
+    <button type="button" className={className} onClick={onClick}>
       {type}: {children}
     </button>
   );