diff --git a/README.md b/README.md
index 78e465d..4f7b591 100644
--- a/README.md
+++ b/README.md
@@ -45,7 +45,7 @@ Use:
 | sync      | Boolean           | false       | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop. changes |
 | speed     | Number            | 300        | Transition time for the animation   |
 | disabled  | Boolean           | false      | Button does not react on mouse events |
-| color     | [String, Object]  | `#75C791`  | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/uncheked <br>Example: `{checked: '#00FF00', unchecked: '#FF0000'}`  |
+| color     | [String, Object]  | `#75C791`  | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/unchecked or disabled<br>Example: `{checked: '#00FF00', unchecked: '#FF0000, disabled: '#CCCCCC'}`  |
 | cssColors | Boolean           | false      | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling |
 | labels    | [Boolean, Object] | false      | If `Boolean` - shows/hides default labels ("on" and "off") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}`   |
 | switchColor     | [String, Object]            | `#BFCBD9`         | If `String` - color or background property of the switch when checked <br>If `Object` - colors or background property for the switch when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}`   |
diff --git a/demo/src/App.vue b/demo/src/App.vue
index 11739fb..730bd40 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -30,11 +30,17 @@
 
         <toggle-button
           :value="false"
-          :width="110"
-          :color="{unchecked: '#FF6699'}"
-          :labels="{unchecked: 'Disabled button'}"
+          :width="80"
+          :labels="{unchecked: 'Disabled'}"
+          :disabled="true"/>
+
+        <toggle-button
+          :value="false"
+          :width="140"
+          :color="{disabled: '#FF6699'}"
+          :labels="{unchecked: 'Custom disabled color'}"
           :disabled="true"/>
-        
+
         <toggle-button :value="true"
           :labels="{checked: 'Button', unchecked: 'Collor'}"
           :color="{checked: '#7DCE94', unchecked: '#82C7EB'}"
diff --git a/dist/index.js b/dist/index.js
index 4a124f2..b4c9502 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -224,7 +224,7 @@ var px = function px(v) {
       return {
         width: px(this.width),
         height: px(this.height),
-        backgroundColor: this.cssColors ? null : this.colorCurrent,
+        backgroundColor: this.cssColors ? null : this.disabled ? this.colorDisabled : this.colorCurrent,
         borderRadius: px(Math.round(this.height / 2))
       };
     },
@@ -264,6 +264,12 @@ var px = function px(v) {
 
       return contains(color, 'unchecked') ? color.unchecked : constants.colorUnchecked;
     },
+    colorDisabled: function colorDisabled() {
+      var color = this.color;
+
+
+      return contains(color, 'disabled') ? color.disabled : this.colorCurrent;
+    },
     colorCurrent: function colorCurrent() {
       return this.toggled ? this.colorChecked : this.colorUnchecked;
     },
diff --git a/dist/ssr.index.js b/dist/ssr.index.js
index dc1f41e..b50a58f 100644
--- a/dist/ssr.index.js
+++ b/dist/ssr.index.js
@@ -224,7 +224,7 @@ var px = function px(v) {
       return {
         width: px(this.width),
         height: px(this.height),
-        backgroundColor: this.cssColors ? null : this.colorCurrent,
+        backgroundColor: this.cssColors ? null : this.disabled ? this.colorDisabled : this.colorCurrent,
         borderRadius: px(Math.round(this.height / 2))
       };
     },
@@ -264,6 +264,12 @@ var px = function px(v) {
 
       return contains(color, 'unchecked') ? color.unchecked : constants.colorUnchecked;
     },
+    colorDisabled: function colorDisabled() {
+      var color = this.color;
+
+
+      return contains(color, 'disabled') ? color.disabled : this.colorCurrent;
+    },
     colorCurrent: function colorCurrent() {
       return this.toggled ? this.colorChecked : this.colorUnchecked;
     },
diff --git a/src/Button.vue b/src/Button.vue
index 691cd16..85fe913 100644
--- a/src/Button.vue
+++ b/src/Button.vue
@@ -114,7 +114,9 @@ export default {
       return {
         width: px(this.width),
         height: px(this.height),
-        backgroundColor: this.cssColors ? null : this.colorCurrent,
+        backgroundColor: this.cssColors
+          ? null
+          : (this.disabled ? this.colorDisabled : this.colorCurrent),
         borderRadius: px(Math.round(this.height / 2))
       }
     },
@@ -165,6 +167,14 @@ export default {
         : constants.colorUnchecked
     },
 
+    colorDisabled () {
+      let { color } = this
+
+      return contains(color, 'disabled')
+        ? color.disabled
+        : this.colorCurrent
+    },
+
     colorCurrent () {
       return this.toggled
         ? this.colorChecked