diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts
index 3208f37e88..a0c535316b 100644
--- a/src/components/buttons/ha-progress-button.ts
+++ b/src/components/buttons/ha-progress-button.ts
@@ -1,13 +1,15 @@
-import "@material/mwc-button";
import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
import type { TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
+import "../ha-button";
import "../ha-spinner";
import "../ha-svg-icon";
@customElement("ha-progress-button")
export class HaProgressButton extends LitElement {
+ @property() public label?: string;
+
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public progress = false;
@@ -21,14 +23,16 @@ export class HaProgressButton extends LitElement {
public render(): TemplateResult {
const overlay = this._result || this.progress;
return html`
-
+
-
+
${!overlay
? nothing
: html`
@@ -68,12 +72,12 @@ export class HaProgressButton extends LitElement {
pointer-events: none;
}
- mwc-button {
+ ha-button {
transition: all 1s;
pointer-events: initial;
}
- mwc-button.success {
+ ha-button.success {
--mdc-theme-primary: white;
background-color: var(--success-color);
transition: none;
@@ -81,13 +85,13 @@ export class HaProgressButton extends LitElement {
pointer-events: none;
}
- mwc-button[unelevated].success,
- mwc-button[raised].success {
+ ha-button[unelevated].success,
+ ha-button[raised].success {
--mdc-theme-primary: var(--success-color);
--mdc-theme-on-primary: white;
}
- mwc-button.error {
+ ha-button.error {
--mdc-theme-primary: white;
background-color: var(--error-color);
transition: none;
@@ -95,8 +99,8 @@ export class HaProgressButton extends LitElement {
pointer-events: none;
}
- mwc-button[unelevated].error,
- mwc-button[raised].error {
+ ha-button[unelevated].error,
+ ha-button[raised].error {
--mdc-theme-primary: var(--error-color);
--mdc-theme-on-primary: white;
}
@@ -113,8 +117,8 @@ export class HaProgressButton extends LitElement {
color: white;
}
- mwc-button.success slot,
- mwc-button.error slot {
+ ha-button.success slot,
+ ha-button.error slot {
visibility: hidden;
}
:host([destructive]) {
diff --git a/src/dialogs/tts-try/dialog-tts-try.ts b/src/dialogs/tts-try/dialog-tts-try.ts
index b89077a636..6fc474b616 100644
--- a/src/dialogs/tts-try/dialog-tts-try.ts
+++ b/src/dialogs/tts-try/dialog-tts-try.ts
@@ -3,7 +3,6 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { storage } from "../../common/decorators/storage";
import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-button";
import { createCloseHeading } from "../../components/ha-dialog";
import "../../components/ha-textarea";
import type { HaTextArea } from "../../components/ha-textarea";
@@ -11,7 +10,7 @@ import { convertTextToSpeech } from "../../data/tts";
import type { HomeAssistant } from "../../types";
import { showAlertDialog } from "../generic/show-dialog-box";
import type { TTSTryDialogParams } from "./show-dialog-tts-try";
-import "../../components/ha-spinner";
+import "../../components/buttons/ha-progress-button";
@customElement("dialog-tts-try")
export class TTSTryDialog extends LitElement {
@@ -81,28 +80,17 @@ export class TTSTryDialog extends LitElement {
?dialogInitialFocus=${!this._defaultMessage}
>
- ${this._loadingExample
- ? html`
-
- `
- : html`
-
-
-
- `}
+
+
+
+
`;
}