Button Card: Option to show state (#6383)

src/panels/lovelace/cards/hui-button-card.ts

@@ -36,6 +36,7 @@ import { hasAction } from "../common/has-action";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { ButtonCardConfig } from "./types";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 @customElement("hui-button-card")
 export class HuiButtonCard extends LitElement implements LovelaceCard {
@@ -66,6 +67,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
       hold_action: { action: "more-info" },
       show_icon: true,
       show_name: true,
+      show_state: false,
       entity: foundEntities[0] || "",
     };
   }
@@ -203,6 +205,15 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
               </span>
             `
           : ""}
+        ${this._config.show_state && stateObj
+          ? html`<span class="state">
+              ${computeStateDisplay(
+                this.hass.localize,
+                stateObj,
+                this.hass.language
+              )}
+            </span>`
+          : ""}
         ${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : ""}
       </ha-card>
     `;
@@ -282,6 +293,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
         outline: none;
       }
 
+      .state {
+        font-size: 0.9rem;
+        color: var(--secondary-text-color);
+      }
+
       ${iconColorCSS}
     `;
   }

src/panels/lovelace/cards/types.ts

@@ -71,6 +71,7 @@ export interface ButtonCardConfig extends LovelaceCardConfig {
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;
   state_color?: boolean;
+  show_state?: boolean;
 }
 
 export interface EntityFilterCardConfig extends LovelaceCardConfig {

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -38,6 +38,7 @@ const cardConfigStruct = struct({
   tap_action: struct.optional(actionConfigStruct),
   hold_action: struct.optional(actionConfigStruct),
   theme: "string?",
+  show_state: "boolean?",
 });
 
 @customElement("hui-button-card-editor")
@@ -64,6 +65,10 @@ export class HuiButtonCardEditor extends LitElement
     return this._config!.show_name || true;
   }
 
+  get _show_state(): boolean {
+    return this._config!.show_state || false;
+  }
+
   get _icon(): string {
     return this._config!.icon || "";
   }
@@ -153,12 +158,26 @@ export class HuiButtonCardEditor extends LitElement
               .dir=${dir}
             >
               <ha-switch
-                .checked="${this._config!.show_name !== false}"
+                .checked="${this._show_name !== false}"
                 .configValue="${"show_name"}"
                 @change="${this._valueChanged}"
               ></ha-switch>
             </ha-formfield>
           </div>
+          <div>
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_state"
+              )}
+              .dir=${dir}
+            >
+              <ha-switch
+                .checked=${this._show_state !== false}
+                .configValue=${"show_state"}
+                @change=${this._valueChanged}
+              ></ha-switch>
+            </ha-formfield>
+          </div>
           <div>
             <ha-formfield
               .label=${this.hass.localize(
@@ -167,7 +186,7 @@ export class HuiButtonCardEditor extends LitElement
               .dir=${dir}
             >
               <ha-switch
-                .checked="${this._config!.show_icon !== false}"
+                .checked="${this._show_icon !== false}"
                 .configValue="${"show_icon"}"
                 @change="${this._valueChanged}"
               ></ha-switch>