✨ entity-button show/hide icon/name

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

@@ -31,7 +31,9 @@ import { DOMAINS_TOGGLE } from "../../../common/const";
 export interface Config extends LovelaceCardConfig {
   entity: string;
   name?: string;
+  snow_name?: boolean;
   icon?: string;
+  show_icon?: boolean;
   theme?: string;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
@@ -48,6 +50,8 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
     return {
       tap_action: { action: "toggle" },
       hold_action: { action: "more-info" },
+      show_icon: true,
+      show_name: true,
     };
   }
 
@@ -68,6 +72,8 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
       theme: "default",
       hold_action: { action: "more-info" },
       ...config,
+      show_icon: true,
+      show_name: true,
     };
 
     if (DOMAINS_TOGGLE.has(computeDomain(config.entity))) {
@@ -126,18 +132,26 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
         @ha-hold="${this._handleHold}"
         .longPress="${longPress()}"
       >
-        <ha-icon
-          data-domain="${computeStateDomain(stateObj)}"
-          data-state="${stateObj.state}"
-          .icon="${this._config.icon || stateIcon(stateObj)}"
-          style="${styleMap({
-            filter: this._computeBrightness(stateObj),
-            color: this._computeColor(stateObj),
-          })}"
-        ></ha-icon>
-        <span>
-          ${this._config.name || computeStateName(stateObj)}
-        </span>
+        ${this._config.show_icon
+          ? html`
+              <ha-icon
+                data-domain="${computeStateDomain(stateObj)}"
+                data-state="${stateObj.state}"
+                .icon="${this._config.icon || stateIcon(stateObj)}"
+                style="${styleMap({
+                  filter: this._computeBrightness(stateObj),
+                  color: this._computeColor(stateObj),
+                })}"
+              ></ha-icon>
+            `
+          : ""}
+        ${this._config.show_name
+          ? html`
+              <span>
+                ${this._config.name || computeStateName(stateObj)}
+              </span>
+            `
+          : ""}
         <mwc-ripple></mwc-ripple>
       </ha-card>
     `;

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

@@ -28,7 +28,9 @@ const cardConfigStruct = struct({
   type: "string",
   entity: "string?",
   name: "string?",
+  show_name: "boolean?",
   icon: "string?",
+  show_icon: "boolean?",
   tap_action: struct.optional(actionConfigStruct),
   hold_action: struct.optional(actionConfigStruct),
   theme: "string?",
@@ -54,10 +56,18 @@ export class HuiEntityButtonCardEditor extends LitElement
     return this._config!.name || "";
   }
 
+  get _show_name(): boolean {
+    return this._config!.show_name || true;
+  }
+
   get _icon(): string {
     return this._config!.icon || "";
   }
 
+  get _show_icon(): boolean {
+    return this._config!.show_icon || true;
+  }
+
   get _tap_action(): ActionConfig {
     return this._config!.tap_action || { action: "more-info" };
   }
@@ -101,6 +111,20 @@ export class HuiEntityButtonCardEditor extends LitElement
             @value-changed="${this._valueChanged}"
           ></paper-input>
         </div>
+        <div class="side-by-side">
+          <paper-toggle-button
+            ?checked="${this._config!.show_name !== false}"
+            .configValue="${"show_name"}"
+            @change="${this._valueChanged}"
+            >Show Name?</paper-toggle-button
+          >
+          <paper-toggle-button
+            ?checked="${this._config!.show_icon !== false}"
+            .configValue="${"show_icon"}"
+            @change="${this._valueChanged}"
+            >Show Icon?</paper-toggle-button
+          >
+        </div>
         <hui-theme-select-editor
           .hass="${this.hass}"
           .value="${this._theme}"
@@ -147,7 +171,12 @@ export class HuiEntityButtonCardEditor extends LitElement
       } else {
         this._config = {
           ...this._config,
-          [target.configValue!]: target.value ? target.value : target.config,
+          [target.configValue!]:
+            target.checked !== undefined
+              ? target.checked
+              : target.value
+              ? target.value
+              : target.config,
         };
       }
     }