diff --git a/src/common/const.ts b/src/common/const.ts
index 0a1943b601..1222fa9ebf 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -144,6 +144,7 @@ export const FIXED_DEVICE_CLASS_ICONS = {
/** Domains that have a state card. */
export const DOMAINS_WITH_CARD = [
+ "button",
"climate",
"cover",
"configurator",
diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts
index 1836d5d6a5..9e4d8d87e4 100644
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -116,6 +116,11 @@ export const computeStateDisplay = (
return formatNumber(compareState, locale);
}
+ // state of button is a timestamp
+ if (domain === "button") {
+ return formatDateTime(new Date(compareState), locale);
+ }
+
return (
// Return device class translation
(stateObj.attributes.device_class &&
diff --git a/src/panels/lovelace/create-element/create-row-element.ts b/src/panels/lovelace/create-element/create-row-element.ts
index f1b63c717c..b4c9afc556 100644
--- a/src/panels/lovelace/create-element/create-row-element.ts
+++ b/src/panels/lovelace/create-element/create-row-element.ts
@@ -24,6 +24,7 @@ const ALWAYS_LOADED_TYPES = new Set([
"call-service",
]);
const LAZY_LOAD_TYPES = {
+ "button-entity": () => import("../entity-rows/hui-button-entity-row"),
"climate-entity": () => import("../entity-rows/hui-climate-entity-row"),
"cover-entity": () => import("../entity-rows/hui-cover-entity-row"),
"group-entity": () => import("../entity-rows/hui-group-entity-row"),
@@ -53,6 +54,7 @@ const DOMAIN_TO_ELEMENT_TYPE = {
_domain_not_found: "text",
alert: "toggle",
automation: "toggle",
+ button: "button",
climate: "climate",
cover: "cover",
fan: "toggle",
diff --git a/src/panels/lovelace/entity-rows/hui-button-entity-row.ts b/src/panels/lovelace/entity-rows/hui-button-entity-row.ts
new file mode 100644
index 0000000000..1184fb67ce
--- /dev/null
+++ b/src/panels/lovelace/entity-rows/hui-button-entity-row.ts
@@ -0,0 +1,82 @@
+import "@material/mwc-button/mwc-button";
+import {
+ css,
+ CSSResultGroup,
+ html,
+ LitElement,
+ PropertyValues,
+ TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { UNAVAILABLE } from "../../../data/entity";
+import { HomeAssistant } from "../../../types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
+import "../components/hui-generic-entity-row";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
+import { ActionRowConfig, LovelaceRow } from "./types";
+
+@customElement("hui-button-entity-row")
+class HuiButtonEntityRow extends LitElement implements LovelaceRow {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @state() private _config?: ActionRowConfig;
+
+ public setConfig(config: ActionRowConfig): void {
+ if (!config) {
+ throw new Error("Invalid configuration");
+ }
+ this._config = config;
+ }
+
+ protected shouldUpdate(changedProps: PropertyValues): boolean {
+ return hasConfigOrEntityChanged(this, changedProps);
+ }
+
+ protected render(): TemplateResult {
+ if (!this._config || !this.hass) {
+ return html``;
+ }
+
+ const stateObj = this.hass.states[this._config.entity];
+
+ if (!stateObj) {
+ return html`
+