diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts
index c39fe4bf83..200b125e90 100644
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -11,11 +11,14 @@ import {
 } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { styleMap } from "lit-html/directives/style-map";
+
 import { computeActiveState } from "../../common/entity/compute_active_state";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { stateIcon } from "../../common/entity/state_icon";
 import { iconColorCSS } from "../../common/style/icon_color_css";
+
 import type { HomeAssistant } from "../../types";
+
 import "../ha-icon";
 
 export class StateBadge extends LitElement {
@@ -37,7 +40,13 @@ export class StateBadge extends LitElement {
   protected render(): TemplateResult {
     const stateObj = this.stateObj;
 
-    if (!stateObj || !this._showIcon) {
+    if (!stateObj) {
+      return html`<div class="missing">
+        <ha-icon icon="hass:alert"></ha-icon>
+      </div>`;
+    }
+
+    if (!this._showIcon) {
       return html``;
     }
 
@@ -140,6 +149,9 @@ export class StateBadge extends LitElement {
       ha-icon {
         transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
       }
+      .missing {
+        color: #fce588;
+      }
 
       ${iconColorCSS}
     `;
diff --git a/src/panels/lovelace/components/hui-buttons-base.ts b/src/panels/lovelace/components/hui-buttons-base.ts
index 0a616df12c..84d9ff81c7 100644
--- a/src/panels/lovelace/components/hui-buttons-base.ts
+++ b/src/panels/lovelace/components/hui-buttons-base.ts
@@ -8,18 +8,20 @@ import {
   queryAll,
   TemplateResult,
 } from "lit-element";
+
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import "../../../components/entity/state-badge";
-import type { StateBadge } from "../../../components/entity/state-badge";
-import "../../../components/ha-icon";
-import type { ActionHandlerEvent } from "../../../data/lovelace";
-import type { HomeAssistant } from "../../../types";
-import type { EntitiesCardEntityConfig } from "../cards/types";
 import { computeTooltip } from "../common/compute-tooltip";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
 
+import type { StateBadge } from "../../../components/entity/state-badge";
+import type { ActionHandlerEvent } from "../../../data/lovelace";
+import type { HomeAssistant } from "../../../types";
+import type { EntitiesCardEntityConfig } from "../cards/types";
+
+import "../../../components/entity/state-badge";
+
 @customElement("hui-buttons-base")
 export class HuiButtonsBase extends LitElement {
   @property() public configEntities?: EntitiesCardEntityConfig[];
@@ -43,11 +45,6 @@ export class HuiButtonsBase extends LitElement {
     return html`
       ${(this.configEntities || []).map((entityConf) => {
         const stateObj = this._hass!.states[entityConf.entity];
-        if (!stateObj) {
-          return html`<div class="missing">
-            <ha-icon icon="hass:alert"></ha-icon>
-          </div>`;
-        }
 
         return html`
           <div
@@ -72,7 +69,7 @@ export class HuiButtonsBase extends LitElement {
                 `
               : ""}
             <span>
-              ${entityConf.show_name ||
+              ${(entityConf.show_name && stateObj) ||
               (entityConf.name && entityConf.show_name !== false)
                 ? entityConf.name || computeStateName(stateObj)
                 : ""}
@@ -94,9 +91,6 @@ export class HuiButtonsBase extends LitElement {
         display: flex;
         justify-content: space-evenly;
       }
-      .missing {
-        color: #fce588;
-      }
       div {
         cursor: pointer;
         align-items: center;