diff --git a/src/panels/lovelace/entity-rows/hui-scene-entity-row.js b/src/panels/lovelace/entity-rows/hui-scene-entity-row.js
deleted file mode 100644
index f66e0c34e5..0000000000
--- a/src/panels/lovelace/entity-rows/hui-scene-entity-row.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-button/paper-button";
-
-import "../components/hui-generic-entity-row";
-
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HuiSceneEntityRow extends LocalizeMixin(PolymerElement) {
- static get template() {
- return html`
- ${this.styleTemplate}
-
- ${this.sceneControlTemplate}
-
- `;
- }
-
- static get styleTemplate() {
- return html`
-
- `;
- }
-
- static get sceneControlTemplate() {
- return html`
-
- [[localize('ui.card.scene.activate')]]
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- _config: Object,
- };
- }
-
- _computeStateObj(states, entityId) {
- return states && entityId in states ? states[entityId] : null;
- }
-
- setConfig(config) {
- if (!config || !config.entity) {
- throw new Error("Entity not configured.");
- }
- this._config = config;
- }
-
- _callService(ev) {
- ev.stopPropagation();
- this.hass.callService("scene", "turn_on", {
- entity_id: this._config.entity,
- });
- }
-}
-customElements.define("hui-scene-entity-row", HuiSceneEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
new file mode 100644
index 0000000000..029b4eb91d
--- /dev/null
+++ b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
@@ -0,0 +1,93 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../components/hui-generic-entity-row";
+import "../../../components/entity/ha-entity-toggle";
+import "./hui-error-entity-row";
+
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { HomeAssistant } from "../../../types";
+import { EntityRow, EntityConfig } from "./types";
+
+class HuiSceneEntityRow extends hassLocalizeLitMixin(LitElement)
+ implements EntityRow {
+ public hass?: HomeAssistant;
+ private _config?: EntityConfig;
+
+ static get properties(): PropertyDeclarations {
+ return {
+ hass: {},
+ _config: {},
+ };
+ }
+
+ public setConfig(config: EntityConfig): void {
+ if (!config) {
+ throw new Error("Configuration error");
+ }
+ this._config = config;
+ }
+
+ protected render(): TemplateResult {
+ if (!this._config || !this.hass) {
+ return html``;
+ }
+
+ const stateObj = this.hass.states[this._config.entity];
+
+ if (!stateObj) {
+ return html`
+
+ `;
+ }
+
+ return html`
+ ${this.renderStyle()}
+
+ ${
+ stateObj.attributes.can_cancel
+ ? html`
+
+ `
+ : html`
+
+ ${this.localize("ui.card.scene.activate")}
+
+ `
+ }
+
+ `;
+ }
+
+ protected renderStyle(): TemplateResult {
+ return html`
+
+ `;
+ }
+
+ private _callService(ev): void {
+ ev.stopPropagation();
+ this.hass!.callService("scene", "turn_on", {
+ entity_id: this._config!.entity,
+ });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-scene-entity-row": HuiSceneEntityRow;
+ }
+}
+
+customElements.define("hui-scene-entity-row", HuiSceneEntityRow);