Use global CSS variables for the primary colour

src/atoms/Button.js

 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>

src/atoms/Button.local.scss

 .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;
 }

src/atoms/Button.md

 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>
+```