diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
index 0e6bc2d874..9a65aad8fc 100644
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/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 {
`
: ""}
+ ${this._config.show_state && stateObj
+ ? html`
+ ${computeStateDisplay(
+ this.hass.localize,
+ stateObj,
+ this.hass.language
+ )}
+ `
+ : ""}
${this._shouldRenderRipple ? html`` : ""}
`;
@@ -282,6 +293,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
outline: none;
}
+ .state {
+ font-size: 0.9rem;
+ color: var(--secondary-text-color);
+ }
+
${iconColorCSS}
`;
}
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index c003fb32ab..8ea3d859b5 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/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 {
diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
index 0ff82af4c6..c76a8ded9c 100644
--- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
+++ b/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}
>
+
+
+
+
+