diff --git a/app/assets/javascripts/discourse/components/badge-button.js.es6 b/app/assets/javascripts/discourse/components/badge-button.js.es6
index c32e1f1cbbe..58b0d1358ce 100644
--- a/app/assets/javascripts/discourse/components/badge-button.js.es6
+++ b/app/assets/javascripts/discourse/components/badge-button.js.es6
@@ -1,6 +1,6 @@
 export default Ember.Component.extend({
   tagName: 'span',
-  classNameBindings: [':user-badge', 'badge.badgeTypeClassName'],
+  classNameBindings: [':user-badge', 'badge.badgeTypeClassName', 'badge.enabled::disabled'],
   title: function(){
     return $("<div>"+this.get('badge.description')+"</div>").text();
   }.property('badge.description'),
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 61a6179fb89..7deaf44cff2 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -30,6 +30,14 @@
   &.badge-type-bronze .fa {
     color: #cd7f32 !important;
   }
+
+  &.disabled {
+    color: $primary-medium;
+    background-color: $primary-very-low;
+    .fa {
+      opacity: 0.4;
+    }
+  }
 }
 
 @media all and (max-width: 750px) {