diff --git a/src/components/entity/ha-state-label-badge.html b/src/components/entity/ha-state-label-badge.html
index 75fff7b45d..77ec20089e 100644
--- a/src/components/entity/ha-state-label-badge.html
+++ b/src/components/entity/ha-state-label-badge.html
@@ -15,6 +15,14 @@
       ha-label-badge {
         --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
       }
+      ha-label-badge.has-unit_of_measurement {
+        --ha-label-badge-label-text-transform: none;
+      }
+
+      ha-label-badge.binary_sensor,
+      ha-label-badge.updater {
+        --ha-label-badge-color: var(--label-badge-blue, #039be5);
+      }
 
       .red {
         --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
@@ -37,7 +45,7 @@
       }
     </style>
 
-    <ha-label-badge class$='[[computeClasses(state)]]'
+    <ha-label-badge class$='[[computeClassNames(state)]]'
       value='[[computeValue(localize, state)]]'
       icon='[[computeIcon(state)]]'
       image='[[computeImage(state)]]'
@@ -90,14 +98,10 @@ class HaStateLabelBadge extends
     this.fire('hass-more-info', { entityId: this.state.entity_id });
   }
 
-  computeClasses(state) {
-    switch (window.hassUtil.computeDomain(state)) {
-      case 'binary_sensor':
-      case 'updater':
-        return 'blue';
-      default:
-        return '';
-    }
+  computeClassNames(state) {
+    const classes = [window.hassUtil.computeDomain(state)];
+    classes.push(window.hassUtil.attributeClassNames(state, ['unit_of_measurement']));
+    return classes.join(' ');
   }
 
   computeValue(localize, state) {
diff --git a/src/components/ha-label-badge.html b/src/components/ha-label-badge.html
index 7aa943dcc5..fec41c691e 100644
--- a/src/components/ha-label-badge.html
+++ b/src/components/ha-label-badge.html
@@ -52,10 +52,11 @@
       border-radius: 1em;
       padding: 8% 16%;
       font-weight: 500;
-      text-transform: uppercase;
       overflow: hidden;
+      text-transform: uppercase;
       text-overflow: ellipsis;
       transition: background-color .3s ease-in-out;
+      text-transform: var(--ha-label-badge-label-text-transform, uppercase);
     }
     .label-badge .label.big span {
       font-size: 90%;