diff --git a/src/atoms/Button.js b/src/atoms/Button.js
index 3270a1ac37c6b32dbc56bf0ff573a05701e857c1..52e6cf38427eab795ba9ce4a456bb38692fbb559 100644
--- a/src/atoms/Button.js
+++ b/src/atoms/Button.js
@@ -1,9 +1,13 @@
 import React from 'react'
+import classnames from 'classnames'
 import classes from './Button.local.scss'
 
-const Button = ({ children, type = 'button', disabled, onClick}) => (
+const Button = ({ children, type = 'button', disabled, primary, onClick}) => (
   <button
-    className={classes.root}
+    className={classnames(classes.root, {
+      [classes.disabled]: disabled,
+      [classes.primary]: primary
+    })}
     type={type}
     disabled={disabled}
     onClick={onClick}>{children}</button>
diff --git a/src/atoms/Button.local.scss b/src/atoms/Button.local.scss
index 498fb964a8636c4de8d9e144b6a2f9a210de3294..02e18e592d1a4e9142ef073a8fa98c0c6ca67ed5 100644
--- a/src/atoms/Button.local.scss
+++ b/src/atoms/Button.local.scss
@@ -1,7 +1,17 @@
 .root {
-  composes: primary from '../lib/colors.local.scss';
   text-transform: uppercase;
   border: none;
   font-size: inherit;
   padding: 10px 20px;
+  cursor: pointer;
+}
+
+.primary {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.disabled {
+  background-color: gray;
+  color: white;
 }
diff --git a/src/atoms/Button.md b/src/atoms/Button.md
index 1c2b0519b6d10c7cadced5db147399958467e7cf..a7871d1b755b82b856d71378e689454757dacaeb 100644
--- a/src/atoms/Button.md
+++ b/src/atoms/Button.md
@@ -1,6 +1,7 @@
 A button.
 
 ```js
+
 <Button>Save</Button>
 ```
 
@@ -9,3 +10,9 @@ A button can be disabled.
 ```js
 <Button disabled>Save</Button>
 ```
+
+A button can be marked as the "primary" action.
+
+```js
+<Button primary>Save</Button>
+```