diff --git a/components/Button/index.scss b/components/Button/index.scss
index ec6dbbf5..bc5211ca 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -60,6 +60,17 @@
     }
   }
 
+  &.Disabled {
+    background-color: var(--button-bg-disabled);
+    color: var(--button-text-disabled);
+
+    &:hover {
+      background-color: var(--button-bg-disabled);
+      color: var(--button-text-disabled);
+      cursor: default;
+    }
+  }
+
   &.medium {
     height: $unit * 5.5;
     padding: ($unit * 1.5) $unit-2x;
diff --git a/styles/variables.scss b/styles/variables.scss
index 7ce848ab..a8bd4fdb 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -133,7 +133,7 @@ $menu--text--dark--hover: $grey-15;
 // Color Definitions: Button
 $button--bg--light: $grey-80;
 $button--bg--light--hover: $grey-100;
-$button--bg--light--disabled: $grey-50;
+$button--bg--light--disabled: $grey-80;
 $button--contained--bg--light: $grey-85;
 $button--contained--bg--light--hover: $grey-80;
 
@@ -145,10 +145,10 @@ $button--contained--bg--dark--hover: $grey-05;
 
 $button--text--light: $grey-55;
 $button--text--light--hover: $grey-40;
-$button--text--light--disabled: $grey-40;
+$button--text--light--disabled: $grey-70;
 $button--text--dark: $grey-70;
 $button--text--dark--hover: $grey-100;
-$button--text--dark--disabled: $grey-50;
+$button--text--dark--disabled: $grey-40;
 
 // Color Definitions: Input
 $input--bg--light: $grey-100;