5 files changed, 22 insertions, 2 deletions

diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index d2c5ad96d..784ead04c 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -10,7 +10,7 @@ import Loader from 'react-loader';
 
 import { IFormField, IWithStyle } from '../typings/generic';
 
-type ButtonType = 'primary' | 'secondary' | 'danger' | 'warning' | 'inverted';
+type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted';
 
 interface IProps extends React.InputHTMLAttributes<HTMLButtonElement>, IFormField, IWithStyle {
   buttonType?: ButtonType;
@@ -61,6 +61,14 @@ const styles = (theme: Theme) => ({
       fill: theme.buttonSecondaryTextColor,
     },
   },
+  success: {
+    background: theme.buttonSuccessBackground,
+    color: theme.buttonSuccessTextColor,
+
+    '& svg': {
+      fill: theme.buttonSuccessTextColor,
+    },
+  },
   danger: {
     background: theme.buttonDangerBackground,
     color: theme.buttonDangerTextColor,
@@ -144,6 +152,7 @@ class ButtonComponent extends Component<IProps> {
   render() {
     const {
       classes,
+      className,
       theme,
       disabled,
       id,
@@ -185,6 +194,7 @@ class ButtonComponent extends Component<IProps> {
           [`${classes.button}`]: true,
           [`${classes[buttonType as ButtonType]}`]: true,
           [`${classes.disabled}`]: disabled,
+          [`${className}`]: className,
         })}
         disabled={disabled}
       >
diff --git a/packages/theme/package-lock.json b/packages/theme/package-lock.json
index f188e8d98..a1673ffe8 100644
--- a/packages/theme/package-lock.json
+++ b/packages/theme/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/theme",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index bc2db5ca0..58ef63217 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -43,6 +43,7 @@ export const buttonWarningTextColor = legacyStyles.darkThemeTextColor;
 export const buttonLoaderColor = {
   primary: '#FFF',
   secondary: buttonSecondaryTextColor,
+  success: '#FFF',
   warning: '#FFF',
   danger: '#FFF',
   inverted: defaultStyles.brandPrimary,
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 92b82cff1..0f78928c3 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -58,6 +58,9 @@ export const buttonPrimaryTextColor = '#FFF';
 export const buttonSecondaryBackground = legacyStyles.themeGrayLighter;
 export const buttonSecondaryTextColor = legacyStyles.themeGray;
 
+export const buttonSuccessBackground = brandSuccess;
+export const buttonSuccessTextColor = '#FFF';
+
 export const buttonDangerBackground = brandDanger;
 export const buttonDangerTextColor = '#FFF';
 
@@ -71,6 +74,7 @@ export const buttonInvertedBorder = `1px solid ${brandPrimary}`;
 export const buttonLoaderColor = {
   primary: '#FFF',
   secondary: buttonSecondaryTextColor,
+  success: '#FFF',
   warning: '#FFF',
   danger: '#FFF',
   inverted: brandPrimary,
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
index 21778e081..b5906211a 100644
--- a/uidev/src/stories/button.stories.tsx
+++ b/uidev/src/stories/button.stories.tsx
@@ -42,6 +42,11 @@ storiesOf('Button')
       buttonType: 'secondary',
     })} />
   ))
+  .add('Success', () => (
+    <WithStoreButton store={createStore({
+      buttonType: 'success',
+    })} />
+  ))
   .add('Warning', () => (
     <WithStoreButton store={createStore({
       buttonType: 'warning',