diff --git a/src/lib/components/button/Button.component.js b/src/lib/components/button/Button.component.js
index fcb6012f20..bcbac688cd 100644
--- a/src/lib/components/button/Button.component.js
+++ b/src/lib/components/button/Button.component.js
@@ -26,7 +26,6 @@ type Props = {
 export const ButtonStyled = styled.button`
   -webkit-appearance: none;
   -moz-appearance: none;
-  cursor: pointer;
   position: relative;
   display: inline-flex;
   user-select: none;
@@ -128,31 +127,6 @@ export const ButtonStyled = styled.button`
     `;
   }}
 
-
-${props => {
-  const brandingTheme = mergeTheme(props.theme, defaultTheme);
-  const brandLighter = lighten(0.3, brandingTheme[props.variant]).toString();
-
-  return css`
-    ${props.disabled
-      ? `
-          box-shadow: none;
-          pointer-events: none;
-          &,
-          &:hover,
-          &:focus,
-          &:active {
-            cursor: default;
-            background-color: ${brandLighter};
-            border-color: ${brandLighter};
-            color: ${defaultTheme.white};
-            box-shadow: none;
-          };
-        `
-      : null}
-  `;
-}}
-
 ${props => {
   return css`
     ${props.isLoading
@@ -177,7 +151,24 @@ ${props => {
 
 ${props => {
   const brandingTheme = mergeTheme(props.theme, defaultTheme);
-  const brandLighter = lighten(0.3, brandingTheme[props.variant]).toString();
+  const brandLighter = lighten(0.2, brandingTheme[props.variant]).toString();
+
+  return css`
+    ${props.disabled
+      ? `
+          box-shadow: none;
+          pointer-events: none;
+          background-color: ${brandLighter};
+          border-color: ${brandLighter};
+          color: ${defaultTheme.white};
+        `
+      : null}
+  `;
+}}
+
+${props => {
+  const brandingTheme = mergeTheme(props.theme, defaultTheme);
+  const brandLighter = lighten(0.2, brandingTheme[props.variant]).toString();
   const brandLight = lighten(0.1, brandingTheme[props.variant]).toString();
 
   return css`
@@ -187,7 +178,7 @@ ${props => {
         height: auto;
         border: none;
         background-color: transparent;
-        color: ${brandingTheme[props.variant]};
+        color: ${props.disabled ? brandLight : brandingTheme[props.variant]};
         
         &:hover{      
           background-color: transparent;
diff --git a/src/lib/components/button/__snapshots__/Button.component.test.js.snap b/src/lib/components/button/__snapshots__/Button.component.test.js.snap
index 95d38d00ee..49bfd22f10 100644
--- a/src/lib/components/button/__snapshots__/Button.component.test.js.snap
+++ b/src/lib/components/button/__snapshots__/Button.component.test.js.snap
@@ -10,7 +10,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Default
   </h3>
   <button
-    className="sc-bxivhb fKJuJK sc-button"
+    className="sc-bxivhb fQBYbA sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -31,7 +31,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb gxZvuR sc-button"
+    className="sc-bxivhb eMOozZ sc-button"
     disabled={false}
     size="small"
     title=""
@@ -52,7 +52,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hMzQXI sc-button"
+    className="sc-bxivhb zLgyQ sc-button"
     data-cy="default_button"
     disabled={false}
     size="base"
@@ -74,7 +74,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dApMWo sc-button"
+    className="sc-bxivhb kWiOHt sc-button"
     disabled={false}
     size="large"
     title=""
@@ -95,7 +95,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb fWtgix sc-button"
+    className="sc-bxivhb efIzbw sc-button"
     disabled={false}
     size="larger"
     title=""
@@ -121,7 +121,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Variant
   </h3>
   <button
-    className="sc-bxivhb hMzQXI sc-button"
+    className="sc-bxivhb zLgyQ sc-button"
     disabled={false}
     size="base"
     title=""
@@ -142,7 +142,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dqKujv sc-button"
+    className="sc-bxivhb krzuoo sc-button"
     disabled={false}
     size="base"
     title=""
@@ -163,7 +163,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dHrFjj sc-button"
+    className="sc-bxivhb cqZXOa sc-button"
     disabled={false}
     size="base"
     title=""
@@ -184,7 +184,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hlfXUS sc-button"
+    className="sc-bxivhb klwTmP sc-button"
     disabled={false}
     size="base"
     title=""
@@ -205,7 +205,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb cVVPvQ sc-button"
+    className="sc-bxivhb hREJhO sc-button"
     disabled={false}
     size="base"
     title=""
@@ -226,7 +226,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dETwpl sc-button"
+    className="sc-bxivhb cqppyq sc-button"
     disabled={false}
     size="base"
     title=""
@@ -252,7 +252,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Outlined
   </h3>
   <button
-    className="sc-bxivhb kxYbdf sc-button"
+    className="sc-bxivhb dHJDHT sc-button"
     disabled={false}
     onClick={[Function]}
     size="base"
@@ -279,7 +279,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Disabled
   </h3>
   <button
-    className="sc-bxivhb lphces sc-button"
+    className="sc-bxivhb iXtJNQ sc-button"
     disabled={true}
     onClick={[Function]}
     size="base"
@@ -300,13 +300,42 @@ exports[`Storyshots Button Default 1`] = `
       </span>
     </span>
   </button>
+  <button
+    className="sc-bxivhb dThNZe sc-button"
+    disabled={true}
+    size="larger"
+    title=""
+    type="button"
+  >
+    <span
+      className="sc-bZQynM iMWVsx"
+    >
+      <span
+        className="sc-button-text"
+      >
+        <span
+          className="sc-ifAKCX bccMeP"
+          size="larger"
+        >
+          <i
+            className="fas fa-star"
+          />
+        </span>
+        <span
+          className="sc-EHOje boinrg"
+        >
+          
+        </span>
+      </span>
+    </span>
+  </button>
   <h3
     className="sc-dnqmqq gBKyfL"
   >
     Button Link
   </h3>
   <a
-    className="sc-gzVnrw dxIUDu sc-button"
+    className="sc-gzVnrw jfvdNb sc-button"
     disabled={false}
     href="/"
     size="base"
@@ -324,7 +353,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Loading
   </h3>
   <button
-    className="sc-bxivhb hdwVjf sc-button"
+    className="sc-bxivhb fwDfLP sc-button"
     disabled={true}
     size="base"
     title=""
@@ -482,7 +511,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Text Icon
   </h3>
   <button
-    className="sc-bxivhb fKJuJK sc-button"
+    className="sc-bxivhb fQBYbA sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -511,7 +540,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb gxZvuR sc-button"
+    className="sc-bxivhb eMOozZ sc-button"
     disabled={false}
     size="small"
     title=""
@@ -540,7 +569,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hMzQXI sc-button"
+    className="sc-bxivhb zLgyQ sc-button"
     disabled={false}
     size="base"
     title=""
@@ -569,7 +598,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dApMWo sc-button"
+    className="sc-bxivhb kWiOHt sc-button"
     disabled={false}
     size="large"
     title=""
@@ -598,7 +627,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb fWtgix sc-button"
+    className="sc-bxivhb efIzbw sc-button"
     disabled={false}
     size="larger"
     title=""
@@ -632,7 +661,7 @@ exports[`Storyshots Button Default 1`] = `
     Icon Button
   </h3>
   <button
-    className="sc-bxivhb fKJuJK sc-button"
+    className="sc-bxivhb fQBYbA sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -661,7 +690,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb gxZvuR sc-button"
+    className="sc-bxivhb eMOozZ sc-button"
     disabled={false}
     size="small"
     title=""
@@ -690,7 +719,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hMzQXI sc-button"
+    className="sc-bxivhb zLgyQ sc-button"
     disabled={false}
     size="base"
     title=""
@@ -719,7 +748,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dApMWo sc-button"
+    className="sc-bxivhb kWiOHt sc-button"
     disabled={false}
     size="large"
     title=""
@@ -748,7 +777,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb fWtgix sc-button"
+    className="sc-bxivhb efIzbw sc-button"
     disabled={false}
     size="larger"
     title=""
@@ -782,7 +811,7 @@ exports[`Storyshots Button Default 1`] = `
     Icon Button Inverted
   </h3>
   <button
-    className="sc-bxivhb fRmOTD sc-button"
+    className="sc-bxivhb bFdGTW sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -811,7 +840,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb LLhWa sc-button"
+    className="sc-bxivhb grzYAE sc-button"
     disabled={false}
     size="small"
     title=""
@@ -840,7 +869,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb bGOshX sc-button"
+    className="sc-bxivhb bWjsDA sc-button"
     disabled={false}
     size="base"
     title=""
@@ -869,7 +898,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb fgMFFV sc-button"
+    className="sc-bxivhb hEQong sc-button"
     disabled={false}
     size="large"
     title=""
@@ -898,7 +927,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb krAwuY sc-button"
+    className="sc-bxivhb cpeGeg sc-button"
     disabled={false}
     size="larger"
     title=""
diff --git a/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap b/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap
index ed25deb759..a01f070bd5 100644
--- a/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap
+++ b/src/lib/components/chips/__snapshots__/Chips.component.test.js.snap
@@ -154,7 +154,7 @@ exports[`Storyshots Chips Default 1`] = `
       Deletable
     </span>
     <button
-      className="sc-bxivhb bGOshX sc-chips-remove"
+      className="sc-bxivhb bWjsDA sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -203,7 +203,7 @@ exports[`Storyshots Chips Default 1`] = `
       Deletable
     </span>
     <button
-      className="sc-bxivhb bGOshX sc-chips-remove"
+      className="sc-bxivhb bWjsDA sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -252,7 +252,7 @@ exports[`Storyshots Chips Default 1`] = `
       Deletable
     </span>
     <button
-      className="sc-bxivhb bGOshX sc-chips-remove"
+      className="sc-bxivhb bWjsDA sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -301,7 +301,7 @@ exports[`Storyshots Chips Default 1`] = `
       Deletable
     </span>
     <button
-      className="sc-bxivhb bGOshX sc-chips-remove"
+      className="sc-bxivhb bWjsDA sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -350,7 +350,7 @@ exports[`Storyshots Chips Default 1`] = `
       Deletable
     </span>
     <button
-      className="sc-bxivhb bGOshX sc-chips-remove"
+      className="sc-bxivhb bWjsDA sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -404,7 +404,7 @@ exports[`Storyshots Chips Default 1`] = `
       Smaller
     </span>
     <button
-      className="sc-bxivhb fRmOTD sc-chips-remove"
+      className="sc-bxivhb bFdGTW sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="smaller"
@@ -453,7 +453,7 @@ exports[`Storyshots Chips Default 1`] = `
       Small
     </span>
     <button
-      className="sc-bxivhb LLhWa sc-chips-remove"
+      className="sc-bxivhb grzYAE sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="small"
@@ -502,7 +502,7 @@ exports[`Storyshots Chips Default 1`] = `
       Base
     </span>
     <button
-      className="sc-bxivhb bGOshX sc-chips-remove"
+      className="sc-bxivhb bWjsDA sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="base"
@@ -551,7 +551,7 @@ exports[`Storyshots Chips Default 1`] = `
       Large
     </span>
     <button
-      className="sc-bxivhb fgMFFV sc-chips-remove"
+      className="sc-bxivhb hEQong sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="large"
@@ -600,7 +600,7 @@ exports[`Storyshots Chips Default 1`] = `
       Larger
     </span>
     <button
-      className="sc-bxivhb krAwuY sc-chips-remove"
+      className="sc-bxivhb cpeGeg sc-chips-remove"
       disabled={false}
       onClick={[Function]}
       size="larger"
diff --git a/src/lib/components/dropdown/__snapshots__/Dropdown.component.test.js.snap b/src/lib/components/dropdown/__snapshots__/Dropdown.component.test.js.snap
index d5c84661b8..5bed816f09 100644
--- a/src/lib/components/dropdown/__snapshots__/Dropdown.component.test.js.snap
+++ b/src/lib/components/dropdown/__snapshots__/Dropdown.component.test.js.snap
@@ -13,7 +13,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU cxyWUF trigger"
+      className="sc-gqjmRU hYDjAh trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -46,7 +46,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU boIWiS trigger"
+      className="sc-gqjmRU ihikah trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -79,7 +79,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU fOfyLU trigger"
+      className="sc-gqjmRU jHHUuy trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -112,7 +112,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU gyNVEX trigger"
+      className="sc-gqjmRU fGYSeI trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -145,7 +145,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU kWpnd trigger"
+      className="sc-gqjmRU khzsgM trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -183,7 +183,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU fOfyLU trigger"
+      className="sc-gqjmRU jHHUuy trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -209,7 +209,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU fOfyLU trigger"
+      className="sc-gqjmRU jHHUuy trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -239,7 +239,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU fOfyLU trigger"
+      className="sc-gqjmRU jHHUuy trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -272,7 +272,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU hyupuE trigger"
+      className="sc-gqjmRU gMBdQb trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -305,7 +305,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU jXvZUK trigger"
+      className="sc-gqjmRU ccxsjj trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -338,7 +338,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU fGdmwK trigger"
+      className="sc-gqjmRU hVGxcT trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -371,7 +371,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU fyffSG trigger"
+      className="sc-gqjmRU eGEotP trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -404,7 +404,7 @@ exports[`Storyshots Dropdown Default 1`] = `
     className="sc-htoDjs jLvNAM sc-dropdown"
   >
     <div
-      className="sc-gqjmRU cRFtSq trigger"
+      className="sc-gqjmRU dCwieS trigger"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
diff --git a/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap b/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap
index 5719d52fd3..eb0d6ebe14 100644
--- a/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap
+++ b/src/lib/components/layout/__snapshots__/Layout.component.test.js.snap
@@ -15,7 +15,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
         onClick={[Function]}
       >
         <button
-          className="sc-bxivhb fiXCOj sc-button"
+          className="sc-bxivhb jZhrJk sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
@@ -139,7 +139,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -170,7 +170,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -196,7 +196,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -222,7 +222,7 @@ exports[`Storyshots Layout Sidebar docked 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -447,7 +447,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
         onClick={[Function]}
       >
         <button
-          className="sc-bxivhb fiXCOj sc-button"
+          className="sc-bxivhb jZhrJk sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
@@ -571,7 +571,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -602,7 +602,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -628,7 +628,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -654,7 +654,7 @@ exports[`Storyshots Layout Sidebar expanded 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
diff --git a/src/lib/components/modal/__snapshots__/Modal.component.test.js.snap b/src/lib/components/modal/__snapshots__/Modal.component.test.js.snap
index 0973ce317d..b4ec82ea97 100644
--- a/src/lib/components/modal/__snapshots__/Modal.component.test.js.snap
+++ b/src/lib/components/modal/__snapshots__/Modal.component.test.js.snap
@@ -46,7 +46,7 @@ exports[`Storyshots Modal Default 1`] = `
           }
         >
           <button
-            className="sc-iwsKbI dzjUlM sc-button"
+            className="sc-iwsKbI jVvuJe sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
@@ -68,7 +68,7 @@ exports[`Storyshots Modal Default 1`] = `
             </span>
           </button>
           <button
-            className="sc-iwsKbI bVCWGk sc-button"
+            className="sc-iwsKbI bVREWY sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
diff --git a/src/lib/components/multiselect/__snapshots__/MultiSelect.component.test.js.snap b/src/lib/components/multiselect/__snapshots__/MultiSelect.component.test.js.snap
index 4b84e65116..3c5f31af88 100644
--- a/src/lib/components/multiselect/__snapshots__/MultiSelect.component.test.js.snap
+++ b/src/lib/components/multiselect/__snapshots__/MultiSelect.component.test.js.snap
@@ -131,7 +131,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-EHOje hSgWMt sc-button"
+          className="sc-EHOje jxDPc sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -181,7 +181,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-EHOje fuJWbI sc-button"
+            className="sc-EHOje ekPVaP sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -229,7 +229,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje hcFjoY sc-button"
+            className="sc-EHOje urACm sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -280,7 +280,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-EHOje fuJWbI sc-button"
+            className="sc-EHOje ekPVaP sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -328,7 +328,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje hcFjoY sc-button"
+            className="sc-EHOje urACm sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -397,7 +397,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-EHOje fuJWbI sc-button"
+            className="sc-EHOje ekPVaP sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -445,7 +445,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje hcFjoY sc-button"
+            className="sc-EHOje urACm sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -496,7 +496,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
             />
           </label>
           <button
-            className="sc-EHOje fuJWbI sc-button"
+            className="sc-EHOje ekPVaP sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -544,7 +544,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje hcFjoY sc-button"
+            className="sc-EHOje urACm sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -704,7 +704,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-EHOje hSgWMt sc-button"
+          className="sc-EHOje jxDPc sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -772,7 +772,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje hcFjoY sc-button"
+            className="sc-EHOje urACm sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -841,7 +841,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje hcFjoY sc-button"
+            className="sc-EHOje urACm sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -1001,7 +1001,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-EHOje hSgWMt sc-button"
+          className="sc-EHOje jxDPc sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -1055,7 +1055,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje hcFjoY sc-button"
+            className="sc-EHOje urACm sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -1110,7 +1110,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           className="sc-cSHVUG aXlwx sc-multi-select-item-right"
         >
           <button
-            className="sc-EHOje hcFjoY sc-button"
+            className="sc-EHOje urACm sc-button"
             disabled={false}
             onClick={[Function]}
             size="base"
@@ -1270,7 +1270,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-EHOje hSgWMt sc-button"
+          className="sc-EHOje jxDPc sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
@@ -1473,7 +1473,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
           </div>
         </div>
         <button
-          className="sc-EHOje hSgWMt sc-button"
+          className="sc-EHOje jxDPc sc-button"
           disabled={false}
           onClick={[Function]}
           size="base"
diff --git a/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap b/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap
index 36d43f0520..00bf8cdbb7 100644
--- a/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap
+++ b/src/lib/components/navbar/__snapshots__/Navbar.component.test.js.snap
@@ -16,7 +16,7 @@ exports[`Storyshots Navbar Default 1`] = `
         onClick={[Function]}
       >
         <button
-          className="sc-bxivhb fiXCOj sc-button"
+          className="sc-bxivhb jZhrJk sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
@@ -140,7 +140,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -171,7 +171,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -197,7 +197,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -223,7 +223,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -353,7 +353,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -384,7 +384,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -410,7 +410,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -436,7 +436,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -476,7 +476,7 @@ exports[`Storyshots Navbar Default 1`] = `
         onClick={[Function]}
       >
         <button
-          className="sc-bxivhb fiXCOj sc-button"
+          className="sc-bxivhb jZhrJk sc-button"
           disabled={false}
           size="larger"
           title="Main Menu"
@@ -536,7 +536,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -567,7 +567,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -593,7 +593,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -619,7 +619,7 @@ exports[`Storyshots Navbar Default 1`] = `
           className="sc-htoDjs jLvNAM sc-dropdown"
         >
           <div
-            className="sc-gqjmRU yOSHF trigger"
+            className="sc-gqjmRU eqUwcs trigger"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
diff --git a/src/lib/components/steppers/__snapshots__/Steppers.component.test.js.snap b/src/lib/components/steppers/__snapshots__/Steppers.component.test.js.snap
index fdb3814f1b..4e3e7fbf66 100644
--- a/src/lib/components/steppers/__snapshots__/Steppers.component.test.js.snap
+++ b/src/lib/components/steppers/__snapshots__/Steppers.component.test.js.snap
@@ -65,7 +65,7 @@ exports[`Storyshots Steppers Default 1`] = `
           className="sc-EHOje iUebre"
         >
           <button
-            className="sc-iwsKbI bVCWGk sc-button"
+            className="sc-iwsKbI bVREWY sc-button"
             disabled={false}
             onClick={[Function]}
             size="small"
diff --git a/src/lib/components/tooltip/__snapshots__/Tooltip.component.test.js.snap b/src/lib/components/tooltip/__snapshots__/Tooltip.component.test.js.snap
index 43bc4de061..58918380a6 100644
--- a/src/lib/components/tooltip/__snapshots__/Tooltip.component.test.js.snap
+++ b/src/lib/components/tooltip/__snapshots__/Tooltip.component.test.js.snap
@@ -112,7 +112,7 @@ exports[`Storyshots Tooltip Default 1`] = `
       onMouseLeave={[Function]}
     >
       <button
-        className="sc-EHOje byxBgp sc-button"
+        className="sc-EHOje hGGgRm sc-button"
         disabled={false}
         size="small"
         title=""
diff --git a/stories/button.js b/stories/button.js
index 9bc48ee559..56e6b67812 100644
--- a/stories/button.js
+++ b/stories/button.js
@@ -39,6 +39,12 @@ storiesOf("Button", module)
           text="Hello"
           onClick={action("Button Disabled Click")}
         />
+        <Button
+          inverted={true}
+          size="larger"
+          icon={<i className="fas fa-star" />}
+          disabled={true}
+        />
 
         <Title>Button Link</Title>
         <Button text="Hello" href="/" />