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} > +
+ + + +