Migrate to ha-button

cast/src/launcher/layout/hc-cast.ts

@@ -1,5 +1,3 @@
-import "@material/mwc-button/mwc-button";
-
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
@@ -20,6 +18,7 @@ import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-icon";
 import "../../../../src/components/ha-list";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 import {
@@ -63,12 +62,20 @@ class HcCast extends LitElement {
               <p class="question action-item">
                 Stay logged in?
                 <span>
-                  <mwc-button @click=${this._handleSaveTokens}>
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    @click=${this._handleSaveTokens}
+                  >
                     YES
-                  </mwc-button>
+                  </ha-button>
-                  <mwc-button @click=${this._handleSkipSaveTokens}>
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    @click=${this._handleSkipSaveTokens}
+                  >
                     NO
-                  </mwc-button>
+                  </ha-button>
                 </span>
               </p>
             `
@@ -78,10 +85,10 @@ class HcCast extends LitElement {
           : !this.castManager.status
             ? html`
                 <p class="center-item">
-                  <mwc-button raised @click=${this._handleLaunch}>
+                  <ha-button @click=${this._handleLaunch}>
-                    <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
+                    <ha-svg-icon slot="prefix" .path=${mdiCast}></ha-svg-icon>
                     Start Casting
-                  </mwc-button>
+                  </ha-button>
                 </p>
               `
             : html`
@@ -121,14 +128,22 @@ class HcCast extends LitElement {
         <div class="card-actions">
           ${this.castManager.status
             ? html`
-                <mwc-button @click=${this._handleLaunch}>
+                <ha-button appearance="plain" @click=${this._handleLaunch}>
-                  <ha-svg-icon .path=${mdiCastConnected}></ha-svg-icon>
+                  <ha-svg-icon
+                    slot="prefix"
+                    .path=${mdiCastConnected}
+                  ></ha-svg-icon>
                   Manage
-                </mwc-button>
+                </ha-button>
               `
             : ""}
           <div class="spacer"></div>
-          <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
+          <ha-button
+            variant="danger"
+            appearance="plain"
+            @click=${this._handleLogout}
+            >Log out</ha-button
+          >
         </div>
       </hc-layout>
     `;
@@ -245,13 +260,6 @@ class HcCast extends LitElement {
       color: var(--secondary-text-color);
     }
 
-    mwc-button ha-svg-icon {
-      margin-right: 8px;
-      margin-inline-end: 8px;
-      margin-inline-start: initial;
-      height: 18px;
-    }
-
     ha-list-item ha-icon,
     ha-list-item ha-svg-icon {
       padding: 12px;

cast/src/launcher/layout/hc-connect.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiCastConnected, mdiCast } from "@mdi/js";
 import type {
   Auth,
@@ -28,6 +27,7 @@ import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
 import "../../../../src/components/ha-textfield";
+import "../../../../src/components/ha-button";
 
 const seeFAQ = (qid) => html`
   See <a href="./faq.html${qid ? `#${qid}` : ""}">the FAQ</a> for more
@@ -83,11 +83,14 @@ export class HcConnect extends LitElement {
             Unable to connect to ${tokens!.hassUrl}.
           </div>
           <div class="card-actions">
-            <a href="/">
+            <ha-button appearance="plain" href="/">Retry</ha-button>
-              <mwc-button> Retry </mwc-button>
-            </a>
             <div class="spacer"></div>
-            <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
+            <ha-button
+              appearance="plain"
+              variant="danger"
+              @click=${this._handleLogout}
+              >Log out</ha-button
+            >
           </div>
         </hc-layout>
       `;
@@ -128,16 +131,19 @@ export class HcConnect extends LitElement {
             ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
           </div>
           <div class="card-actions">
-            <mwc-button @click=${this._handleDemo}>
+            <ha-button appearance="plain" @click=${this._handleDemo}>
               Show Demo
               <ha-svg-icon
+                slot="suffix"
                 .path=${this.castManager.castState === "CONNECTED"
                   ? mdiCastConnected
                   : mdiCast}
               ></ha-svg-icon>
-            </mwc-button>
+            </ha-button>
             <div class="spacer"></div>
-            <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
+            <ha-button appearance="plain" @click=${this._handleConnect}
+              >Authorize</ha-button
+            >
           </div>
         </hc-layout>
       `;
@@ -309,10 +315,6 @@ export class HcConnect extends LitElement {
       color: darkred;
     }
 
-    mwc-button ha-svg-icon {
-      margin-left: 8px;
-    }
-
     .spacer {
       flex: 1;
     }

gallery/src/components/demo-black-white-row.ts

@@ -1,11 +1,11 @@
-import "@material/mwc-button/mwc-button";
-import type { Button } from "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-button";
+import type { HaButton } from "../../../src/components/ha-button";
 
 @customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {
@@ -25,12 +25,9 @@ class DemoBlackWhiteRow extends LitElement {
               <slot name="light"></slot>
             </div>
             <div class="card-actions">
-              <mwc-button
+              <ha-button .disabled=${this.disabled} @click=${this.handleSubmit}>
-                .disabled=${this.disabled}
-                @click=${this.handleSubmit}
-              >
                 Submit
-              </mwc-button>
+              </ha-button>
             </div>
           </ha-card>
         </div>
@@ -40,12 +37,9 @@ class DemoBlackWhiteRow extends LitElement {
               <slot name="dark"></slot>
             </div>
             <div class="card-actions">
-              <mwc-button
+              <ha-button .disabled=${this.disabled} @click=${this.handleSubmit}>
-                .disabled=${this.disabled}
-                @click=${this.handleSubmit}
-              >
                 Submit
-              </mwc-button>
+              </ha-button>
             </div>
           </ha-card>
           ${this.value
@@ -74,7 +68,7 @@ class DemoBlackWhiteRow extends LitElement {
   }
 
   handleSubmit(ev) {
-    const content = (ev.target as Button).closest(".content")!;
+    const content = (ev.target as HaButton).closest(".content")!;
     fireEvent(this, "submitted" as any, {
       slot: content.classList.contains("light") ? "light" : "dark",
     });

gallery/src/pages/components/ha-alert.markdown

@@ -147,13 +147,13 @@ The `title ` option should not be used without a description.
 
 <ha-alert alert-type="success">
   This is a success alert — check it out!
-  <mwc-button slot="action" label="Undo"></mwc-button>
+  <ha-button slot="action" label="Undo"></ha-button>
 </ha-alert>
 
 ```html
 <ha-alert alert-type="success">
   This is a success alert — check it out!
-  <mwc-button slot="action" label="Undo"></mwc-button>
+  <ha-button slot="action" label="Undo"></ha-button>
 </ha-alert>
 ```
 

gallery/src/pages/components/ha-alert.ts

@@ -1,10 +1,10 @@
-import "@material/mwc-button/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-logo-svg";
 
 const alerts: {
@@ -78,13 +78,21 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action",
     type: "error",
-    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
+    actionSlot: html`<ha-button
+      size="small"
+      slot="action"
+      label="restart"
+    ></ha-button>`,
   },
   {
     title: "Unsaved data",
     description: "You have unsaved data",
     type: "warning",
-    actionSlot: html`<mwc-button slot="action" label="save"></mwc-button>`,
+    actionSlot: html`<ha-button
+      size="small"
+      slot="action"
+      label="save"
+    ></ha-button>`,
   },
   {
     title: "Slotted icon",
@@ -108,7 +116,7 @@ const alerts: {
     title: "Slotted action",
     description: "Alert with slotted action",
     type: "info",
-    actionSlot: html`<mwc-button slot="action" label="action"></mwc-button>`,
+    actionSlot: html`<ha-button slot="action" label="action"></ha-button>`,
   },
   {
     description: "Dismissable information (RTL)",
@@ -120,7 +128,7 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action (RTL)",
     type: "error",
-    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
+    actionSlot: html`<ha-button slot="action" label="restart"></ha-button>`,
     rtl: true,
   },
   {
@@ -211,7 +219,7 @@ export class DemoHaAlert extends LitElement {
       max-height: 24px;
       width: 24px;
     }
-    mwc-button {
+    ha-button {
       --mdc-theme-primary: var(--primary-text-color);
     }
   `;

gallery/src/pages/misc/util-long-press.ts

@@ -1,8 +1,8 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-button";
 import type { ActionHandlerEvent } from "../../../../src/data/lovelace/action_handler";
 import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive";
 
@@ -13,12 +13,13 @@ export class DemoUtilLongPress extends LitElement {
       ${[1, 2, 3].map(
         () => html`
           <ha-card>
-            <mwc-button
+            <ha-button
+              appearance="plain"
               @action=${this._handleAction}
               .actionHandler=${actionHandler({})}
             >
               (long) press me!
-            </mwc-button>
+            </ha-button>
 
             <textarea></textarea>
 

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -99,7 +99,8 @@ class HassioAddonNetwork extends LitElement {
           : nothing}
         <div class="card-actions">
           <ha-progress-button
-            class="warning"
+            variant="danger"
+            appearance="plain"
             .disabled=${this.disabled}
             @click=${this._resetTapped}
           >

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -25,6 +25,7 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
@@ -187,12 +188,13 @@ class HassioAddonInfo extends LitElement {
                 "addon.dashboard.protection_mode.content"
               )}
               <ha-button
+                variant="danger"
                 slot="action"
-                .label=${this.supervisor.localize(
-                  "addon.dashboard.protection_mode.enable"
-                )}
                 @click=${this._protectionToggled}
               >
+                ${this.supervisor.localize(
+                  "addon.dashboard.protection_mode.enable"
+                )}
               </ha-button>
             </ha-alert>
           `
@@ -692,14 +694,16 @@ class HassioAddonInfo extends LitElement {
               ? this._computeIsRunning
                 ? html`
                     <ha-progress-button
-                      class="warning"
+                      variant="danger"
+                      appearance="plain"
                       @click=${this._stopClicked}
                       .disabled=${systemManaged && !this.controlEnabled}
                     >
                       ${this.supervisor.localize("addon.dashboard.stop")}
                     </ha-progress-button>
                     <ha-progress-button
-                      class="warning"
+                      variant="danger"
+                      appearance="plain"
                       @click=${this._restartClicked}
                     >
                       ${this.supervisor.localize("addon.dashboard.restart")}
@@ -709,48 +713,19 @@ class HassioAddonInfo extends LitElement {
                     <ha-progress-button
                       @click=${this._startClicked}
                       .progress=${this.addon.state === "startup"}
+                      appearance="plain"
                     >
                       ${this.supervisor.localize("addon.dashboard.start")}
                     </ha-progress-button>
                   `
-              : html`
+              : nothing}
-                  <ha-progress-button
-                    .disabled=${!this.addon.available}
-                    @click=${this._installClicked}
-                  >
-                    ${this.supervisor.localize("addon.dashboard.install")}
-                  </ha-progress-button>
-                `}
           </div>
           <div>
             ${this.addon.version
-              ? html` ${this._computeShowWebUI
+              ? html`
-                    ? html`
-                        <a
-                          href=${this._pathWebui!}
-                          tabindex="-1"
-                          target="_blank"
-                          rel="noopener"
-                        >
-                          <ha-button>
-                            ${this.supervisor.localize(
-                              "addon.dashboard.open_web_ui"
-                            )}
-                          </ha-button>
-                        </a>
-                      `
-                    : nothing}
-                  ${this._computeShowIngressUI
-                    ? html`
-                        <ha-button @click=${this._openIngress}>
-                          ${this.supervisor.localize(
-                            "addon.dashboard.open_web_ui"
-                          )}
-                        </ha-button>
-                      `
-                    : nothing}
                   <ha-progress-button
-                    class="warning"
+                    variant="danger"
+                    appearance="plain"
                     @click=${this._uninstallClicked}
                     .disabled=${systemManaged && !this.controlEnabled}
                   >
@@ -759,14 +734,47 @@ class HassioAddonInfo extends LitElement {
                   ${this.addon.build
                     ? html`
                         <ha-progress-button
-                          class="warning"
+                          variant="danger"
+                          appearance="plain"
                           @click=${this._rebuildClicked}
                         >
                           ${this.supervisor.localize("addon.dashboard.rebuild")}
                         </ha-progress-button>
                       `
-                    : nothing}`
+                    : nothing}
-              : nothing}
+                  ${this._computeShowWebUI || this._computeShowIngressUI
+                    ? html`
+                        <ha-button
+                          href=${ifDefined(
+                            !this._computeShowIngressUI
+                              ? this._pathWebui!
+                              : nothing
+                          )}
+                          target=${ifDefined(
+                            !this._computeShowIngressUI ? "_blank" : nothing
+                          )}
+                          rel=${ifDefined(
+                            !this._computeShowIngressUI ? "noopener" : nothing
+                          )}
+                          @click=${!this._computeShowWebUI
+                            ? this._openIngress
+                            : undefined}
+                        >
+                          ${this.supervisor.localize(
+                            "addon.dashboard.open_web_ui"
+                          )}
+                        </ha-button>
+                      `
+                    : nothing}
+                `
+              : html`
+                  <ha-progress-button
+                    .disabled=${!this.addon.available}
+                    @click=${this._installClicked}
+                  >
+                    ${this.supervisor.localize("addon.dashboard.install")}
+                  </ha-progress-button>
+                `}
           </div>
         </div>
       </ha-card>
@@ -1146,15 +1154,17 @@ class HassioAddonInfo extends LitElement {
           ),
           dismissText: this.supervisor.localize("common.cancel"),
         });
+        button.actionError();
         button.progress = false;
         return;
       }
     } catch (err: any) {
+      button.actionError();
+      button.progress = false;
       showAlertDialog(this, {
         title: "Failed to validate addon configuration",
         text: extractApiErrorMessage(err),
       });
-      button.progress = false;
       return;
     }
 
@@ -1168,11 +1178,15 @@ class HassioAddonInfo extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err: any) {
+      button.actionError();
+      button.progress = false;
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.start"),
         text: extractApiErrorMessage(err),
       });
+      return;
     }
+    button.actionSuccess();
     button.progress = false;
   }
 
@@ -1228,6 +1242,7 @@ class HassioAddonInfo extends LitElement {
         path: "uninstall",
       };
       fireEvent(this, "hass-api-called", eventdata);
+      button.actionSuccess();
     } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
@@ -1235,6 +1250,7 @@ class HassioAddonInfo extends LitElement {
         ),
         text: extractApiErrorMessage(err),
       });
+      button.actionError();
     }
     button.progress = false;
   }

hassio/src/backups/hassio-backups.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { ActionDetail } from "@material/mwc-list";
 
 import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
@@ -17,6 +16,7 @@ import type {
 } from "../../../src/components/data-table/ha-data-table";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-list-item";
 import "../../../src/components/ha-svg-icon";
@@ -241,12 +241,13 @@ export class HassioBackups extends LitElement {
               <div class="header-btns">
                 ${!this.narrow
                   ? html`
-                      <mwc-button
+                      <ha-button
+                        appearance="plain"
+                        variant="danger"
                         @click=${this._deleteSelected}
-                        class="warning"
                       >
                         ${this.supervisor.localize("backup.delete_selected")}
-                      </mwc-button>
+                      </ha-button>
                     `
                   : html`
                       <ha-icon-button
@@ -408,7 +409,7 @@ export class HassioBackups extends LitElement {
           margin-inline-end: -12px;
           margin-inline-start: initial;
         }
-        .header-btns > mwc-button,
+        .header-btns > ha-button,
         .header-btns > ha-icon-button {
           margin: 8px;
         }

hassio/src/dashboard/hassio-update.ts

@@ -1,10 +1,9 @@
-import "@material/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-svg-icon";
 import type { HassioHassOSInfo } from "../../../src/data/hassio/host";
@@ -109,10 +108,9 @@ export class HassioUpdate extends LitElement {
           </ha-settings-row>
         </div>
         <div class="card-actions">
-          <a href="/hassio/update-available/${key}">
+          <ha-button appearance="plain" href="/hassio/update-available/${key}">
-            <mwc-button .label=${this.supervisor.localize("common.show")}>
+            ${this.supervisor.localize("common.show")}
-            </mwc-button>
+          </ha-button>
-          </a>
         </div>
       </ha-card>
     `;

hassio/src/dialogs/backup/dialog-hassio-backup-location.ts

@@ -1,10 +1,10 @@
-import "@material/mwc-button/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../src/components/ha-form/types";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -77,20 +77,21 @@ class HassioBackupLocationDialog extends LitElement {
           @value-changed=${this._valueChanged}
           dialogInitialFocus
         ></ha-form>
-        <mwc-button
+        <ha-button
+          appearance="plain"
           slot="secondaryAction"
           @click=${this.closeDialog}
           dialogInitialFocus
         >
           ${this._dialogParams.supervisor.localize("common.cancel")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button
+        <ha-button
           .disabled=${this._waiting || !this._data}
           slot="primaryAction"
           @click=${this._changeMount}
         >
           ${this._dialogParams.supervisor.localize("common.save")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -8,7 +8,6 @@ import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import { slugify } from "../../../../src/common/string/slugify";
-import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-button-menu";

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -1,10 +1,9 @@
-import "@material/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-spinner";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import {
@@ -69,16 +68,20 @@ class HassioCreateBackupDialog extends LitElement {
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
-        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+        >
           ${this._dialogParams.supervisor.localize("common.close")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button
+        <ha-button
           .disabled=${this._creatingBackup}
           slot="primaryAction"
           @click=${this._createBackup}
         >
           ${this._dialogParams.supervisor.localize("backup.create")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-select";
 import "../../../../src/components/ha-spinner";
@@ -109,17 +110,18 @@ class HassioDatadiskDialog extends LitElement {
                       "dialog.datadisk_move.no_devices"
                     )}
 
-              <mwc-button
+              <ha-button
-                slot="secondaryAction"
+                appearance="plain"
+                slot="primaryAction"
                 @click=${this.closeDialog}
                 dialogInitialFocus
               >
                 ${this.dialogParams.supervisor.localize(
                   "dialog.datadisk_move.cancel"
                 )}
-              </mwc-button>
+              </ha-button>
 
-              <mwc-button
+              <ha-button
                 .disabled=${!this.selectedDevice}
                 slot="primaryAction"
                 @click=${this._moveDatadisk}
@@ -127,7 +129,7 @@ class HassioDatadiskDialog extends LitElement {
                 ${this.dialogParams.supervisor.localize(
                   "dialog.datadisk_move.move"
                 )}
-              </mwc-button>`}
+              </ha-button>`}
       </ha-dialog>
     `;
   }

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
@@ -15,7 +15,6 @@ import "../../../../src/components/ha-list";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-password-field";
 import "../../../../src/components/ha-radio";
-import "../../../../src/components/ha-spinner";
 import "../../../../src/components/ha-textfield";
 import type { HaTextField } from "../../../../src/components/ha-textfield";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -154,16 +153,16 @@ export class DialogHassioNetwork
                       )}
                     </p>`
                   : ""}
-                <mwc-button
+                <ha-button
+                  appearance="plain"
+                  size="small"
                   class="scan"
                   @click=${this._scanForAP}
                   .disabled=${this._scanning}
+                  .loading=${this._scanning}
                 >
-                  ${this._scanning
+                  ${this.supervisor.localize("dialog.network.scan_ap")}
-                    ? html`<ha-spinner aria-label="Scanning" size="small">
+                </ha-button>
-                      </ha-spinner>`
-                    : this.supervisor.localize("dialog.network.scan_ap")}
-                </mwc-button>
                 ${this._accessPoints &&
                 this._accessPoints.accesspoints &&
                 this._accessPoints.accesspoints.length !== 0
@@ -270,16 +269,16 @@ export class DialogHassioNetwork
           : ""}
       </div>
       <div class="buttons">
-        <mwc-button
+        <ha-button @click=${this.closeDialog} appearance="plain">
-          .label=${this.supervisor.localize("common.cancel")}
+          ${this.supervisor.localize("common.cancel")}
-          @click=${this.closeDialog}
+        </ha-button>
+        <ha-button
+          @click=${this._updateNetwork}
+          .disabled=${!this._dirty}
+          .loading=${this._processing}
         >
-        </mwc-button>
+          ${this.supervisor.localize("common.save")}
-        <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
+        </ha-button>
-          ${this._processing
-            ? html`<ha-spinner size="small"> </ha-spinner>`
-            : this.supervisor.localize("common.save")}
-        </mwc-button>
       </div>`;
   }
 
@@ -584,11 +583,7 @@ export class DialogHassioNetwork
           }
         }
 
-        mwc-button.warning {
+        ha-button.scan {
-          --mdc-theme-primary: var(--error-color);
-        }
-
-        mwc-button.scan {
           margin-left: 8px;
           margin-inline-start: 8px;
           margin-inline-end: initial;

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -1,5 +1,4 @@
-import "@material/mwc-button/mwc-button";
+import { mdiDelete, mdiPlus } from "@mdi/js";
-import { mdiDelete } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -7,6 +6,8 @@ import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-button";
+import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-settings-row";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
@@ -84,16 +85,19 @@ class HassioRegistriesDialog extends LitElement {
                 dialogInitialFocus
               ></ha-form>
               <div class="action">
-                <mwc-button
+                <ha-button
                   ?disabled=${Boolean(
                     !this._input.registry ||
                       !this._input.username ||
                       !this._input.password
                   )}
                   @click=${this._addNewRegistry}
+                  appearance="filled"
+                  size="small"
                 >
+                  <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
                   ${this.supervisor.localize("dialog.registries.add_registry")}
-                </mwc-button>
+                </ha-button>
               </div>
             `
           : html`${this._registries?.length
@@ -126,11 +130,17 @@ class HassioRegistriesDialog extends LitElement {
                     </ha-alert>
                   `}
               <div class="action">
-                <mwc-button @click=${this._addRegistry} dialogInitialFocus>
+                <ha-button
+                  @click=${this._addRegistry}
+                  dialogInitialFocus
+                  appearance="filled"
+                  size="small"
+                >
+                  <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
                   ${this.supervisor.localize(
                     "dialog.registries.add_new_registry"
                   )}
-                </mwc-button>
+                </ha-button>
               </div> `}
       </ha-dialog>
     `;

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -1,5 +1,4 @@
-import "@material/mwc-button/mwc-button";
+import { mdiDelete, mdiDeleteOff, mdiPlus } from "@mdi/js";
-import { mdiDelete, mdiDeleteOff } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -7,8 +6,9 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-alert";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-tooltip";
-import "../../../../src/components/ha-spinner";
+import "../../../../src/components/ha-svg-icon";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-icon-button";
 import type {
@@ -159,18 +159,22 @@ class HassioRepositoriesDialog extends LitElement {
               @keydown=${this._handleKeyAdd}
               dialogInitialFocus
             ></ha-textfield>
-            <mwc-button @click=${this._addRepository}>
+            <ha-button
-              ${this._processing
+              .loading=${this._processing}
-                ? html`<ha-spinner size="small"></ha-spinner>`
+              @click=${this._addRepository}
-                : this._dialogParams!.supervisor.localize(
+              appearance="filled"
-                    "dialog.repositories.add"
+              size="small"
-                  )}
+            >
-            </mwc-button>
+              <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
+              ${this._dialogParams!.supervisor.localize(
+                "dialog.repositories.add"
+              )}
+            </ha-button>
           </div>
         </div>
-        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+        <ha-button slot="primaryAction" @click=${this.closeDialog}>
           ${this._dialogParams?.supervisor.localize("common.close")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }
@@ -191,16 +195,11 @@ class HassioRepositoriesDialog extends LitElement {
           border-radius: 4px;
           margin-top: 4px;
         }
-        mwc-button {
+        ha-button {
           margin-left: 8px;
           margin-inline-start: 8px;
           margin-inline-end: initial;
         }
-        ha-spinner {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
         div.delete ha-icon-button {
           color: var(--error-color);
         }

hassio/src/system/hassio-core-info.ts

@@ -1,11 +1,10 @@
-import "@material/mwc-button";
-
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import type { HassioStats } from "../../../src/data/hassio/common";
@@ -70,12 +69,12 @@ class HassioCoreInfo extends LitElement {
               ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
               this.supervisor.core.update_available
                 ? html`
-                    <a href="/hassio/update-available/core">
+                    <ha-button
-                      <mwc-button
+                      appearance="plain"
-                        .label=${this.supervisor.localize("common.show")}
+                      href="/hassio/update-available/core"
-                      >
+                    >
-                      </mwc-button>
+                      ${this.supervisor.localize("common.show")}
-                    </a>
+                    </ha-button>
                   `
                 : ""}
             </ha-settings-row>

hassio/src/system/hassio-host-info.ts

@@ -1,5 +1,3 @@
-import "@material/mwc-button";
-
 import { mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
@@ -8,10 +6,11 @@ import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
-import "../../../src/components/ha-list-item";
 import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-list-item";
 import "../../../src/components/ha-settings-row";
 import {
   extractApiErrorMessage,
@@ -77,24 +76,28 @@ class HassioHostInfo extends LitElement {
                   <span slot="description">
                     ${this.supervisor.host.hostname}
                   </span>
-                  <mwc-button
+                  <ha-button
-                    .label=${this.supervisor.localize("system.host.change")}
                     @click=${this._changeHostnameClicked}
+                    appearance="plain"
+                    size="small"
                   >
-                  </mwc-button>
+                    ${this.supervisor.localize("system.host.change")}
+                  </ha-button>
                 </ha-settings-row>`
               : ""}
             ${this.supervisor.host.features.includes("network")
-              ? html` <ha-settings-row>
+              ? html`<ha-settings-row>
                   <span slot="heading">
                     ${this.supervisor.localize("system.host.ip_address")}
                   </span>
                   <span slot="description"> ${primaryIpAddress} </span>
-                  <mwc-button
+                  <ha-button
-                    .label=${this.supervisor.localize("system.host.change")}
                     @click=${this._changeNetworkClicked}
+                    appearance="plain"
+                    size="small"
                   >
-                  </mwc-button>
+                    ${this.supervisor.localize("system.host.change")}
+                  </ha-button>
                 </ha-settings-row>`
               : ""}
 
@@ -108,12 +111,13 @@ class HassioHostInfo extends LitElement {
               ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
               this.supervisor.os.update_available
                 ? html`
-                    <a href="/hassio/update-available/os">
+                    <ha-button
-                      <mwc-button
+                      appearance="plain"
-                        .label=${this.supervisor.localize("common.show")}
+                      size="small"
-                      >
+                      href="/hassio/update-available/os"
-                      </mwc-button>
+                    >
-                    </a>
+                      ${this.supervisor.localize("common.show")}
+                    </ha-button>
                   `
                 : ""}
             </ha-settings-row>

hassio/src/system/hassio-supervisor-info.ts

@@ -5,6 +5,7 @@ import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
+import "../../../src/components/ha-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-switch";
@@ -80,12 +81,13 @@ class HassioSupervisorInfo extends LitElement {
               ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
               this.supervisor.supervisor.update_available
                 ? html`
-                    <a href="/hassio/update-available/supervisor">
+                    <ha-button
-                      <mwc-button
+                      appearance="plain"
-                        .label=${this.supervisor.localize("common.show")}
+                      size="small"
-                      >
+                      href="/hassio/update-available/supervisor"
-                      </mwc-button>
+                    >
-                    </a>
+                      ${this.supervisor.localize("common.show")}
+                    </ha-button>
                   `
                 : ""}
             </ha-settings-row>
@@ -156,24 +158,28 @@ class HassioSupervisorInfo extends LitElement {
                   ${this.supervisor.localize(
                     "system.supervisor.unsupported_title"
                   )}
-                  <mwc-button
+                  <ha-button
                     slot="action"
-                    .label=${this.supervisor.localize("common.learn_more")}
                     @click=${this._unsupportedDialog}
+                    variant="warning"
+                    size="small"
                   >
-                  </mwc-button>
+                    ${this.supervisor.localize("common.learn_more")}
+                  </ha-button>
                 </ha-alert>`}
             ${!this.supervisor.supervisor.healthy
               ? html`<ha-alert alert-type="error">
                   ${this.supervisor.localize(
                     "system.supervisor.unhealthy_title"
                   )}
-                  <mwc-button
+                  <ha-button
+                    variant="danger"
+                    size="small"
                     slot="action"
-                    .label=${this.supervisor.localize("common.learn_more")}
                     @click=${this._unhealthyDialog}
                   >
-                  </mwc-button>
+                    ${this.supervisor.localize("common.learn_more")}
+                  </ha-button>
                 </ha-alert>`
               : ""}
           </div>
@@ -448,9 +454,6 @@ class HassioSupervisorInfo extends LitElement {
           white-space: normal;
           color: var(--secondary-text-color);
         }
-        ha-alert mwc-button {
-          --mdc-theme-primary: var(--primary-text-color);
-        }
         a {
           text-decoration: none;
         }

src/auth/ha-auth-flow.ts

@@ -1,5 +1,4 @@
 /* eslint-disable lit/prefer-static-styles */
-import "@material/mwc-button";
 import { genClientId } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
@@ -7,6 +6,7 @@ import { keyed } from "lit/directives/keyed";
 import { customElement, property, state } from "lit/decorators";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
+import "../components/ha-button";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
 import "../components/ha-formfield";
@@ -173,15 +173,14 @@ export class HaAuthFlow extends LitElement {
         return html`
           ${this._renderStep(this.step)}
           <div class="action">
-            <mwc-button
+            <ha-button
-              raised
               @click=${this._handleSubmit}
               .disabled=${this._submitting}
             >
               ${this.step.type === "form"
                 ? this.localize("ui.panel.page-authorize.form.next")
                 : this.localize("ui.panel.page-authorize.form.start_over")}
-            </mwc-button>
+            </ha-button>
           </div>
         `;
       case "error":
@@ -192,9 +191,9 @@ export class HaAuthFlow extends LitElement {
             })}
           </ha-alert>
           <div class="action">
-            <mwc-button raised @click=${this._startOver}>
+            <ha-button @click=${this._startOver}>
               ${this.localize("ui.panel.page-authorize.form.start_over")}
-            </mwc-button>
+            </ha-button>
           </div>
         `;
       case "loading":

src/components/buttons/ha-call-service-button.ts

@@ -30,6 +30,7 @@ class HaCallServiceButton extends LitElement {
       <ha-progress-button
         .progress=${this.progress}
         .disabled=${this.disabled}
+        appearance="plain"
         @click=${this._buttonTapped}
         tabindex="0"
       >

src/components/buttons/ha-progress-button.ts

@@ -5,6 +5,13 @@ import { customElement, property, state } from "lit/decorators";
 import "../ha-button";
 import "../ha-spinner";
 import "../ha-svg-icon";
+import type { Appearance } from "../ha-button";
+
+const HIGHLIGHT_APPEARANCE = {
+  accent: "accent" as Appearance,
+  filled: "accent" as Appearance,
+  plain: "filled" as Appearance,
+};
 
 @customElement("ha-progress-button")
 export class HaProgressButton extends LitElement {
@@ -12,30 +19,53 @@ export class HaProgressButton extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public progress = false;
+  @property({ type: Boolean, reflect: true }) public progress = false;
 
-  @property({ type: Boolean }) public raised = false;
+  @property() appearance: Appearance = "accent";
 
-  @property({ type: Boolean }) public unelevated = false;
+  @property() variant:
+    | "primary"
+    | "danger"
+    | "neutral"
+    | "warning"
+    | "success" = "primary";
 
   @state() private _result?: "success" | "error";
 
+  @state() private _hasInitialIcon = false;
+
   public render(): TemplateResult {
-    const overlay = this._result || this.progress;
+    const appearance =
+      this.progress || this._result
+        ? HIGHLIGHT_APPEARANCE[this.appearance]
+        : this.appearance;
+
     return html`
       <ha-button
-        .appearance=${this.unelevated
+        .appearance=${appearance}
-          ? "accent"
+        .disabled=${this.disabled}
-          : this.raised
+        .loading=${this.progress}
-            ? "filled"
+        .variant=${this._result === "success"
-            : "plain"}
+          ? "success"
-        .disabled=${this.disabled || this.progress}
+          : this._result === "error"
-        class=${this._result || ""}
+            ? "danger"
+            : this.variant}
+        .hideContent=${this._result !== undefined}
       >
-        <slot name="icon" slot="icon"></slot>
+        ${this._hasInitialIcon
-        <slot>${this.label}</slot>
+          ? html`<slot name="icon" slot="prefix"></slot>`
+          : nothing}
+        <slot
+          >${this._result
+            ? html`<ha-svg-icon
+                .path=${this._result === "success"
+                  ? mdiCheckBold
+                  : mdiAlertOctagram}
+              ></ha-svg-icon>`
+            : this.label}</slot
+        >
       </ha-button>
-      ${!overlay
+      ${!this._result
         ? nothing
         : html`
             <div class="progress">
@@ -43,14 +73,20 @@ export class HaProgressButton extends LitElement {
                 ? html`<ha-svg-icon .path=${mdiCheckBold}></ha-svg-icon>`
                 : this._result === "error"
                   ? html`<ha-svg-icon .path=${mdiAlertOctagram}></ha-svg-icon>`
-                  : this.progress
+                  : nothing}
-                    ? html`<ha-spinner size="small"></ha-spinner>`
-                    : nothing}
             </div>
           `}
     `;
   }
 
+  firstUpdated() {
+    const iconSlot = this.shadowRoot!.querySelector(
+      'slot[name="icon"]'
+    ) as HTMLSlotElement;
+    this._hasInitialIcon =
+      iconSlot && iconSlot.assignedNodes({ flatten: true }).length > 0;
+  }
+
   public actionSuccess(): void {
     this._setResult("success");
   }
@@ -71,47 +107,23 @@ export class HaProgressButton extends LitElement {
       outline: none;
       display: inline-block;
       position: relative;
+    }
+
+    :host([progress]) {
       pointer-events: none;
     }
 
     ha-button {
       transition: all 1s;
-      pointer-events: initial;
-    }
-
-    ha-button.success {
-      --mdc-theme-primary: white;
-      background-color: var(--success-color);
-      transition: none;
-      border-radius: 4px;
-      pointer-events: none;
-    }
-
-    ha-button[unelevated].success,
-    ha-button[raised].success {
-      --mdc-theme-primary: var(--success-color);
-      --mdc-theme-on-primary: white;
-    }
-
-    ha-button.error {
-      --mdc-theme-primary: white;
-      background-color: var(--error-color);
-      transition: none;
-      border-radius: 4px;
-      pointer-events: none;
-    }
-
-    ha-button[unelevated].error,
-    ha-button[raised].error {
-      --mdc-theme-primary: var(--error-color);
-      --mdc-theme-on-primary: white;
     }
 
     .progress {
-      bottom: 4px;
+      bottom: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       position: absolute;
-      text-align: center;
+      top: 0;
-      top: 4px;
       width: 100%;
     }
 

src/components/ha-button.ts

@@ -3,6 +3,8 @@ import styles from "@shoelace-style/shoelace/dist/components/button/button.style
 import { css } from "lit";
 import { customElement, property } from "lit/decorators";
 
+export type Appearance = "accent" | "filled" | "plain";
+
 /**
  * Home Assistant button component
  *
@@ -35,12 +37,15 @@ import { customElement, property } from "lit/decorators";
  * @cssprop --ha-button-font-size - Font weight for the button text.
  *
  * @attr {("small"|"medium")} size - Sets the button size.
- * @attr {("primary"|"danger"|"neutral"|"warning")} variant - Sets the button color variant. "primary" is default.
+ * @attr {("primary"|"danger"|"neutral"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
  * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
  */
 @customElement("ha-button")
 export class HaButton extends Button {
-  @property({ reflect: true }) appearance?: "accent" | "filled" | "plain";
+  @property({ reflect: true }) appearance?: Appearance;
+
+  @property({ type: Boolean, attribute: "hide-content", reflect: true })
+  hideContent = false;
 
   static override styles = [
     styles,
@@ -97,6 +102,12 @@ export class HaButton extends Button {
         --ha-button-theme-lighter-color: #fef3cd;
       }
 
+      :host([variant="success"]) {
+        --ha-button-theme-color: var(--success-color);
+        --ha-button-theme-darker-color: #275e2a;
+        --ha-button-theme-lighter-color: #5ce463;
+      }
+
       .button {
         height: var(--ha-button-height, var(--button-height, 40px));
         align-items: center;
@@ -113,11 +124,13 @@ export class HaButton extends Button {
       .button--standard.button--neutral,
       .button--standard.button--danger,
       .button--standard.button--warning,
+      .button--standard.button--success,
       .button--standard.button--default:active:not(.button--disabled),
       .button--standard.button--primary:active:not(.button--disabled),
       .button--standard.button--neutral:active:not(.button--disabled),
       .button--standard.button--danger:active:not(.button--disabled),
       .button--standard.button--warning:active:not(.button--disabled),
+      .button--standard.button--success:active:not(.button--disabled),
       .button:active:not(.button--disabled) {
         background-color: var(--ha-button-theme-color);
         color: var(--ha-button-text-color, var(--white-color));
@@ -127,6 +140,7 @@ export class HaButton extends Button {
       .button--standard.button--primary:hover:not(.button--disabled),
       .button--standard.button--neutral:hover:not(.button--disabled),
       .button--standard.button--warning:hover:not(.button--disabled),
+      .button--standard.button--success:hover:not(.button--disabled),
       .button--standard.button--danger:hover:not(.button--disabled) {
         background-color: var(--ha-button-theme-darker-color);
         color: var(--ha-button-text-color, var(--white-color));
@@ -167,6 +181,17 @@ export class HaButton extends Button {
       .button--caret.button--small .button__label {
         padding-inline-end: 4px;
       }
+
+      /*
+      * hide content for overlays
+      */
+
+      :host([hide-content]) .button .button__prefix,
+      :host([hide-content]) .button .button__label,
+      :host([hide-content]) .button .button__suffix,
+      :host([hide-content]) .button .button__caret {
+        visibility: hidden;
+      }
     `,
   ];
 }

src/components/ha-dialog-date-picker.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import "app-datepicker";
 import { format } from "date-fns";
 import { css, html, LitElement, nothing } from "lit";
@@ -9,6 +8,7 @@ import { haStyleDialog } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import type { DatePickerDialogParams } from "./ha-date-input";
 import "./ha-dialog";
+import "./ha-button";
 
 @customElement("ha-dialog-date-picker")
 export class HaDialogDatePicker extends LitElement {
@@ -51,23 +51,33 @@ export class HaDialogDatePicker extends LitElement {
         .firstDayOfWeek=${this._params.firstWeekday}
       ></app-datepicker>
       ${this._params.canClear
-        ? html`<mwc-button
+        ? html`<ha-button
             slot="secondaryAction"
             @click=${this._clear}
-            class="warning"
+            variant="danger"
+            appearance="plain"
           >
             ${this.hass.localize("ui.dialogs.date-picker.clear")}
-          </mwc-button>`
+          </ha-button>`
         : nothing}
-      <mwc-button slot="secondaryAction" @click=${this._setToday}>
+      <ha-button
+        appearance="plain"
+        slot="secondaryAction"
+        @click=${this._setToday}
+      >
         ${this.hass.localize("ui.dialogs.date-picker.today")}
-      </mwc-button>
+      </ha-button>
-      <mwc-button slot="primaryAction" dialogaction="cancel" class="cancel-btn">
+      <ha-button
+        appearance="plain"
+        slot="primaryAction"
+        dialogaction="cancel"
+        class="cancel-btn"
+      >
         ${this.hass.localize("ui.common.cancel")}
-      </mwc-button>
+      </ha-button>
-      <mwc-button slot="primaryAction" @click=${this._setValue}>
+      <ha-button slot="primaryAction" @click=${this._setValue}>
         ${this.hass.localize("ui.common.ok")}
-      </mwc-button>
+      </ha-button>
     </ha-dialog>`;
   }
 

src/components/ha-lawn_mower-action-button.ts

@@ -1,7 +1,7 @@
-import "@material/mwc-button";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { supportsFeature } from "../common/entity/supports-feature";
+import "./ha-button";
 import type { LawnMowerEntity, LawnMowerEntityState } from "../data/lawn_mower";
 import { LawnMowerEntityFeature } from "../data/lawn_mower";
 import type { HomeAssistant } from "../types";
@@ -49,16 +49,21 @@ class HaLawnMowerActionButton extends LitElement {
 
     if (action && supportsFeature(this.stateObj, action.feature)) {
       return html`
-        <mwc-button @click=${this.callService} .service=${action.service}>
+        <ha-button
+          appearance="plain"
+          @click=${this.callService}
+          .service=${action.service}
+          size="small"
+        >
           ${this.hass.localize(`ui.card.lawn_mower.actions.${action.action}`)}
-        </mwc-button>
+        </ha-button>
       `;
     }
 
     return html`
-      <mwc-button disabled>
+      <ha-button appearance="plain" disabled>
         ${this.hass.formatEntityState(this.stateObj)}
-      </mwc-button>
+      </ha-button>
     `;
   }
 
@@ -72,17 +77,13 @@ class HaLawnMowerActionButton extends LitElement {
   }
 
   static styles = css`
-    mwc-button {
+    ha-button {
       top: 3px;
       height: 37px;
       margin-right: -0.57em;
       margin-inline-end: -0.57em;
       margin-inline-start: initial;
     }
-    mwc-button[disabled] {
-      background-color: transparent;
-      color: var(--secondary-text-color);
-    }
   `;
 }
 

src/dialogs/notifications/notification-item-template.ts

@@ -39,6 +39,8 @@ export class HuiNotificationItemTemplate extends LitElement {
     .actions {
       border-top: 1px solid var(--divider-color, #e8e8e8);
       padding: 5px 16px;
+      display: flex;
+      justify-content: flex-end;
     }
 
     ::slotted(.primary) {

src/dialogs/notifications/persistent-notification-item.ts

@@ -41,7 +41,10 @@ export class HuiPersistentNotificationItem extends LitElement {
           </span>
         </div>
 
-        <ha-button slot="actions" @click=${this._handleDismiss}
+        <ha-button
+          appearance="plain"
+          slot="actions"
+          @click=${this._handleDismiss}
           >${this.hass.localize(
             "ui.card.persistent_notification.dismiss"
           )}</ha-button

src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts

@@ -36,8 +36,13 @@ class HaBackupConfigEncryptionKey extends LitElement {
                 "ui.panel.config.backup.encryption_key.download_emergency_kit_description"
               )}
             </span>
-            <ha-button slot="end" @click=${this._download}>
+            <ha-button
-              <ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
+              appearance="plain"
+              slot="end"
+              @click=${this._download}
+              size="small"
+            >
+              <ha-svg-icon .path=${mdiDownload} slot="prefix"></ha-svg-icon>
               ${this.hass.localize(
                 "ui.panel.config.backup.encryption_key.download_emergency_kit_action"
               )}
@@ -54,7 +59,12 @@ class HaBackupConfigEncryptionKey extends LitElement {
                 "ui.panel.config.backup.encryption_key.show_encryption_key_description"
               )}
             </span>
-            <ha-button slot="end" @click=${this._show}>
+            <ha-button
+              appearance="plain"
+              slot="end"
+              @click=${this._show}
+              size="small"
+            >
               ${this.hass.localize(
                 "ui.panel.config.backup.encryption_key.show_encryption_key_action"
               )}
@@ -71,7 +81,13 @@ class HaBackupConfigEncryptionKey extends LitElement {
                 "ui.panel.config.backup.encryption_key.change_encryption_key_description"
               )}
             </span>
-            <ha-button class="danger" slot="end" @click=${this._change}>
+            <ha-button
+              appearance="plain"
+              variant="danger"
+              size="small"
+              slot="end"
+              @click=${this._change}
+            >
               ${this.hass.localize(
                 "ui.panel.config.backup.encryption_key.change_encryption_key_action"
               )}
@@ -141,8 +157,9 @@ class HaBackupConfigEncryptionKey extends LitElement {
     ha-md-list-item {
       --md-item-overflow: visible;
     }
-    .danger {
+
-      --mdc-theme-primary: var(--error-color);
+    ha-button[size="small"] ha-svg-icon {
+      --mdc-icon-size: 16px;
     }
   `;
 }

src/panels/config/backup/components/ha-backup-details-restore.ts

@@ -67,7 +67,8 @@ class HaBackupDetailsRestore extends LitElement {
           <ha-button
             @click=${this._restore}
             .disabled=${this._isRestoreDisabled}
-            destructive
+            variant="danger"
+            appearance="plain"
           >
             ${this.localize(
               `ui.panel.${this.translationKeyPanel}.details.restore.action`

src/panels/config/backup/components/overview/ha-backup-overview-backups.ts

@@ -100,7 +100,7 @@ class HaBackupOverviewBackups extends LitElement {
         </div>
         <div class="card-actions">
           <a href="/config/backup/backups?type=all">
-            <ha-button>
+            <ha-button appearance="filled">
               ${this.hass.localize(
                 "ui.panel.config.backup.overview.backups.show_all"
               )}

src/panels/config/backup/components/overview/ha-backup-overview-settings.ts

@@ -285,7 +285,7 @@ class HaBackupBackupsSummary extends LitElement {
           </ha-md-list>
         </div>
         <div class="card-actions">
-          <ha-button @click=${this._configure}>
+          <ha-button @click=${this._configure} appearance="filled">
             ${this.hass.localize(
               "ui.panel.config.backup.overview.settings.configure"
             )}

src/panels/config/backup/dialogs/dialog-generate-backup.ts

@@ -204,7 +204,7 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
         <div slot="actions">
           ${isFirstStep
             ? html`
-                <ha-button @click=${this.closeDialog}>
+                <ha-button @click=${this.closeDialog} appearance="plain">
                   ${this.hass.localize("ui.common.cancel")}
                 </ha-button>
               `

src/panels/config/backup/ha-config-backup-settings.ts

@@ -274,44 +274,42 @@ class HaConfigBackupSettings extends LitElement {
                     )}
                   </div>
                   <div class="card-actions">
-                    <a href="/config/cloud/login">
+                    <ha-button appearance="plain" href="/config/cloud/login">
-                      <ha-button>
+                      ${this.hass.localize(
-                        ${this.hass.localize(
+                        "ui.panel.config.voice_assistants.assistants.cloud.sign_in"
-                          "ui.panel.config.voice_assistants.assistants.cloud.sign_in"
+                      )}
-                        )}
+                    </ha-button>
-                      </ha-button>
+                    <ha-button href="/config/cloud/register">
-                    </a>
+                      ${this.hass.localize(
-                    <a href="/config/cloud/register">
+                        "ui.panel.config.voice_assistants.assistants.cloud.try_one_month"
-                      <ha-button unelevated>
+                      )}
-                        ${this.hass.localize(
+                    </ha-button>
-                          "ui.panel.config.voice_assistants.assistants.cloud.try_one_month"
-                        )}
-                      </ha-button>
-                    </a>
                   </div>
                 </ha-card>`
               : nothing}
             <div class="card-actions">
-              <a
+              <ha-button
+                size="small"
                 href=${documentationUrl(this.hass, "/integrations/#backup")}
                 target="_blank"
                 rel="noreferrer"
+                appearance="plain"
               >
-                <ha-button>
+                <ha-svg-icon slot="prefix" .path=${mdiOpenInNew}></ha-svg-icon>
-                  <ha-svg-icon slot="icon" .path=${mdiOpenInNew}></ha-svg-icon>
+                ${this.hass.localize(
-                  ${this.hass.localize(
+                  "ui.panel.config.backup.settings.locations.more_locations"
-                    "ui.panel.config.backup.settings.locations.more_locations"
+                )}
-                  )}
+              </ha-button>
-                </ha-button>
-              </a>
               ${supervisor
-                ? html`<a href="/config/storage">
+                ? html`<ha-button
-                    <ha-button>
+                    size="small"
-                      ${this.hass.localize(
+                    appearance="plain"
-                        "ui.panel.config.backup.settings.locations.manage_network_storage"
+                    href="/config/storage"
-                      )}
+                  >
-                    </ha-button>
+                    ${this.hass.localize(
-                  </a>`
+                      "ui.panel.config.backup.settings.locations.manage_network_storage"
+                    )}
+                  </ha-button>`
                 : nothing}
             </div>
           </ha-card>
@@ -549,6 +547,10 @@ class HaConfigBackupSettings extends LitElement {
       display: flex;
       justify-content: space-between;
     }
+
+    ha-button[size="small"] ha-svg-icon {
+      --mdc-icon-size: 16px;
+    }
   `;
 }
 

src/panels/config/cloud/account/dialog-cloud-tts-try.ts

@@ -1,5 +1,3 @@
-import "@material/mwc-button";
-
 import { mdiPlayCircleOutline, mdiRobot } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -13,6 +11,7 @@ import { supportsFeature } from "../../../../common/entity/supports-feature";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-select";
+import "../../../../components/ha-button";
 import "../../../../components/ha-textarea";
 import type { HaTextArea } from "../../../../components/ha-textarea";
 import { showAutomationEditor } from "../../../../data/automation";
@@ -118,26 +117,28 @@ export class DialogTryTts extends LitElement {
               )}
           </ha-select>
         </div>
-        <mwc-button
+        <ha-button
           slot="primaryAction"
-          .label=${this.hass.localize(
-            "ui.panel.config.cloud.account.tts.dialog.play"
-          )}
           @click=${this._playExample}
           .disabled=${this._loadingExample}
         >
-          <ha-svg-icon slot="icon" .path=${mdiPlayCircleOutline}></ha-svg-icon>
+          <ha-svg-icon
-        </mwc-button>
+            slot="prefix"
-        <mwc-button
+            .path=${mdiPlayCircleOutline}
+          ></ha-svg-icon>
+          ${this.hass.localize("ui.panel.config.cloud.account.tts.dialog.play")}
+        </ha-button>
+        <ha-button
+          appearance="plain"
           slot="secondaryAction"
           .disabled=${target === "browser"}
-          .label=${this.hass.localize(
-            "ui.panel.config.cloud.account.tts.dialog.create_automation"
-          )}
           @click=${this._createAutomation}
         >
-          <ha-svg-icon slot="icon" .path=${mdiRobot}></ha-svg-icon>
+          <ha-svg-icon slot="prefix" .path=${mdiRobot}></ha-svg-icon>
-        </mwc-button>
+          ${this.hass.localize(
+            "ui.panel.config.cloud.account.tts.dialog.create_automation"
+          )}
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -7,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-button";
 import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
 
 @customElement("dialog-cloud-certificate")
@@ -74,11 +74,11 @@ class DialogCloudCertificate extends LitElement {
           </ul>
         </div>
 
-        <mwc-button @click=${this.closeDialog} slot="primaryAction">
+        <ha-button @click=${this.closeDialog} slot="primaryAction">
           ${this.hass!.localize(
             "ui.panel.config.cloud.dialog_certificate.close"
           )}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiOpenInNew } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -11,6 +10,7 @@ import type { HomeAssistant } from "../../../../types";
 import { documentationUrl } from "../../../../util/documentation-url";
 import type { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
 
+import "../../../../components/ha-button";
 import "../../../../components/ha-copy-textfield";
 
 export class DialogManageCloudhook extends LitElement {
@@ -86,21 +86,20 @@ export class DialogManageCloudhook extends LitElement {
           ></ha-copy-textfield>
         </div>
 
-        <a
+        <ha-button
           href=${docsUrl}
           target="_blank"
           rel="noreferrer"
           slot="secondaryAction"
+          appearance="plain"
         >
-          <mwc-button>
+          ${this.hass!.localize(
-            ${this.hass!.localize(
+            "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
-              "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
+          )}
-            )}
+        </ha-button>
-          </mwc-button>
+        <ha-button @click=${this.closeDialog} slot="primaryAction">
-        </a>
-        <mwc-button @click=${this.closeDialog} slot="primaryAction">
           ${this.hass!.localize("ui.panel.config.cloud.dialog_cloudhook.close")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/core/ha-config-analytics.ts

@@ -1,12 +1,14 @@
-import "@material/mwc-button/mwc-button";
+import { mdiOpenInNew } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-analytics";
+import "../../../components/ha-button";
 import "../../../components/ha-card";
 import "../../../components/ha-checkbox";
 import "../../../components/ha-settings-row";
+import "../../../components/ha-svg-icon";
 import type { Analytics } from "../../../data/analytics";
 import {
   getAnalyticsDetails,
@@ -44,21 +46,24 @@ class ConfigAnalytics extends LitElement {
           ></ha-analytics>
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._save}>
+          <ha-button appearance="plain" @click=${this._save}>
             ${this.hass.localize(
               "ui.panel.config.core.section.core.core_config.save_button"
             )}
-          </mwc-button>
+          </ha-button>
         </div>
       </ha-card>
       <div class="footer">
-        <a
+        <ha-button
+          size="small"
+          appearance="plain"
           href=${documentationUrl(this.hass, "/integrations/analytics/")}
           target="_blank"
           rel="noreferrer"
         >
+          <ha-svg-icon slot="suffix" .path=${mdiOpenInNew}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.analytics.learn_more")}
-        </a>
+        </ha-button>
       </div>
     `;
   }
@@ -122,6 +127,10 @@ class ConfigAnalytics extends LitElement {
           padding: 32px 0 16px;
           text-align: center;
         }
+
+        ha-button[size="small"] ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
       `, // row-reverse so we tab first to "save"
     ];
   }

src/panels/config/core/updates/dialog-join-beta.ts

@@ -1,10 +1,10 @@
-import "@material/mwc-button/mwc-button";
 import { mdiOpenInNew } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-button";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -67,12 +67,16 @@ export class DialogJoinBeta
           )}
           <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
         </a>
-        <mwc-button slot="primaryAction" @click=${this._cancel}>
+        <ha-button
+          appearance="plain"
+          slot="primaryAction"
+          @click=${this._cancel}
+        >
           ${this.hass.localize("ui.common.cancel")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button slot="primaryAction" @click=${this._join}>
+        <ha-button slot="primaryAction" @click=${this._join}>
           ${this.hass.localize("ui.dialogs.join_beta_channel.join")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -7,6 +6,7 @@ import { computeDeviceNameDisplay } from "../../../../common/entity/compute_devi
 import "../../../../components/ha-alert";
 import "../../../../components/ha-area-picker";
 import "../../../../components/ha-dialog";
+import "../../../../components/ha-button";
 import "../../../../components/ha-labels-picker";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import "../../../../components/ha-textfield";
@@ -131,20 +131,21 @@ class DialogDeviceRegistryDetail extends LitElement {
             </div>
           </div>
         </div>
-        <mwc-button
+        <ha-button
-          slot="secondaryAction"
+          slot="primaryAction"
           @click=${this.closeDialog}
           .disabled=${this._submitting}
+          appearance="plain"
         >
           ${this.hass.localize("ui.common.cancel")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button
+        <ha-button
           slot="primaryAction"
           @click=${this._updateEntry}
           .disabled=${this._submitting}
         >
           ${this.hass.localize("ui.dialogs.device-registry-detail.update")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }
@@ -190,7 +191,7 @@ class DialogDeviceRegistryDetail extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        mwc-button.warning {
+        ha-button.warning {
           margin-right: auto;
           margin-inline-end: auto;
           margin-inline-start: initial;

src/panels/config/devices/ha-config-device-page.ts

@@ -27,6 +27,7 @@ import { groupBy } from "../../../common/util/group-by";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-alert";
 import "../../../components/ha-button-menu";
+import "../../../components/ha-button";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
@@ -405,9 +406,9 @@ export class HaConfigDevicePage extends LitElement {
         ${device.disabled_by === "user"
           ? html`
               <div class="card-actions" slot="actions">
-                <mwc-button unelevated @click=${this._enableDevice}>
+                <ha-button @click=${this._enableDevice}>
                   ${this.hass.localize("ui.common.enable")}
-                </mwc-button>
+                </ha-button>
               </div>
             `
           : ""}
@@ -750,7 +751,7 @@ export class HaConfigDevicePage extends LitElement {
                         )}
                         target=${ifDefined(firstDeviceAction!.target)}
                       >
-                        <mwc-button
+                        <ha-button
                           class=${ifDefined(firstDeviceAction!.classes)}
                           .action=${firstDeviceAction!.action}
                           @click=${this._deviceActionClicked}
@@ -774,7 +775,7 @@ export class HaConfigDevicePage extends LitElement {
                                 ></ha-svg-icon>
                               `
                             : ""}
-                        </mwc-button>
+                        </ha-button>
                       </a>
                     </div>
 

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-button/mwc-button";
 import {
   mdiDelete,
   mdiHomeExportOutline,
   mdiHomeImportOutline,
   mdiPencil,
+  mdiPlus,
   mdiTransmissionTower,
 } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
@@ -11,7 +11,9 @@ import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
+import "../../../../components/ha-button";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-svg-icon";
 import type { ConfigEntry } from "../../../../data/config_entries";
 import {
   deleteConfigEntry,
@@ -160,10 +162,15 @@ export class EnergyGridSettings extends LitElement {
           })}
           <div class="row border-bottom">
             <ha-svg-icon .path=${mdiHomeImportOutline}></ha-svg-icon>
-            <mwc-button @click=${this._addFromSource}
+            <ha-button
-              >${this.hass.localize(
+              appearance="filled"
+              size="small"
+              @click=${this._addFromSource}
+            >
+              <ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
+              ${this.hass.localize(
                 "ui.panel.config.energy.grid.add_consumption"
-              )}</mwc-button
+              )}</ha-button
             >
           </div>
 
@@ -207,10 +214,15 @@ export class EnergyGridSettings extends LitElement {
           })}
           <div class="row border-bottom">
             <ha-svg-icon .path=${mdiHomeExportOutline}></ha-svg-icon>
-            <mwc-button @click=${this._addToSource}
+            <ha-button
+              @click=${this._addToSource}
+              appearance="filled"
+              size="small"
+            >
+              <ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon
               >${this.hass.localize(
                 "ui.panel.config.energy.grid.add_return"
-              )}</mwc-button
+              )}</ha-button
             >
           </div>
 
@@ -257,11 +269,16 @@ export class EnergyGridSettings extends LitElement {
                       darkOptimized: this.hass.themes?.darkMode,
                     })}
                   />
-                  <mwc-button @click=${this._addCO2Sensor}>
+                  <ha-button
+                    @click=${this._addCO2Sensor}
+                    appearance="filled"
+                    size="small"
+                  >
+                    <ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
                     ${this.hass.localize(
                       "ui.panel.config.energy.grid.add_co2_signal"
                     )}
-                  </mwc-button>
+                  </ha-button>
                 </div>
               `}
         </div>

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiBatteryHigh } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-dialog";
+import "../../../../components/ha-button";
 import type { BatterySourceTypeEnergyPreference } from "../../../../data/energy";
 import {
   emptyBatteryEnergyPreference,
@@ -123,17 +123,21 @@ export class DialogEnergyBatterySettings
           @value-changed=${this._statisticFromChanged}
         ></ha-statistic-picker>
 
-        <mwc-button @click=${this.closeDialog} slot="secondaryAction">
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="primaryAction"
+        >
           ${this.hass.localize("ui.common.cancel")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button
+        <ha-button
           @click=${this._save}
           .disabled=${!this._source.stat_energy_from ||
           !this._source.stat_energy_to}
           slot="primaryAction"
         >
           ${this.hass.localize("ui.common.save")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/energy/dialogs/dialog-energy-device-settings.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiDevices } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -9,6 +8,7 @@ import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-radio";
+import "../../../../components/ha-button";
 import "../../../../components/ha-select";
 import "../../../../components/ha-list-item";
 import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
@@ -183,16 +183,20 @@ export class DialogEnergyDeviceSettings
               )}
         </ha-select>
 
-        <mwc-button @click=${this.closeDialog} slot="secondaryAction">
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="primaryAction"
+        >
           ${this.hass.localize("ui.common.cancel")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button
+        <ha-button
           @click=${this._save}
           .disabled=${!this._device}
           slot="primaryAction"
         >
           ${this.hass.localize("ui.common.save")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -1,5 +1,4 @@
-import "@material/mwc-button/mwc-button";
+import { mdiPlus, mdiSolarPower } from "@mdi/js";
-import { mdiSolarPower } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -9,7 +8,9 @@ import "../../../../components/ha-checkbox";
 import type { HaCheckbox } from "../../../../components/ha-checkbox";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-button";
 import "../../../../components/ha-radio";
+import "../../../../components/ha-svg-icon";
 import type { HaRadio } from "../../../../components/ha-radio";
 import type { ConfigEntry } from "../../../../data/config_entries";
 import { getConfigEntries } from "../../../../data/config_entries";
@@ -179,24 +180,33 @@ export class DialogEnergySolarSettings
                     </ha-checkbox>
                   </ha-formfield>`
               )}
-              <mwc-button @click=${this._addForecast}>
+              <ha-button
+                appearance="filled"
+                size="small"
+                @click=${this._addForecast}
+              >
+                <ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
                 ${this.hass.localize(
                   "ui.panel.config.energy.solar.dialog.add_forecast"
                 )}
-              </mwc-button>
+              </ha-button>
             </div>`
           : ""}
 
-        <mwc-button @click=${this.closeDialog} slot="secondaryAction">
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="secondaryAction"
+        >
           ${this.hass.localize("ui.common.cancel")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button
+        <ha-button
           @click=${this._save}
           .disabled=${!this._source.stat_energy_from}
           slot="primaryAction"
         >
           ${this.hass.localize("ui.common.save")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }
@@ -294,7 +304,7 @@ export class DialogEnergySolarSettings
           padding-inline-start: 32px;
           padding-inline-end: initial;
         }
-        .forecast-options mwc-button {
+        .forecast-options ha-button {
           padding-left: 8px;
           padding-inline-start: 8px;
           padding-inline-end: initial;

src/panels/config/energy/dialogs/dialog-energy-water-settings.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiWater } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -7,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-dialog";
+import "../../../../components/ha-button";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
 import type { HaRadio } from "../../../../components/ha-radio";
@@ -236,16 +236,20 @@ export class DialogEnergyWaterSettings
             </ha-textfield>`
           : ""}
 
-        <mwc-button @click=${this.closeDialog} slot="secondaryAction">
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="primaryAction"
+        >
           ${this.hass.localize("ui.common.cancel")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button
+        <ha-button
           @click=${this._save}
           .disabled=${!this._source.stat_energy_from}
           slot="primaryAction"
         >
           ${this.hass.localize("ui.common.save")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/hardware/ha-config-hardware.ts

@@ -12,6 +12,7 @@ import "../../../components/buttons/ha-progress-button";
 import "../../../components/chart/ha-chart-base";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
+import "../../../components/ha-button";
 import "../../../components/ha-md-list-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
@@ -311,23 +312,27 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                     ? html`<div class="card-actions">
                         ${boardConfigEntries.length
                           ? html`
-                              <mwc-button
+                              <ha-button
                                 .entry=${boardConfigEntries[0]}
                                 @click=${this._openOptionsFlow}
+                                appearance="plain"
                               >
                                 ${this.hass.localize(
                                   "ui.panel.config.hardware.configure"
                                 )}
-                              </mwc-button>
+                              </ha-button>
                             `
                           : nothing}
                         ${isComponentLoaded(this.hass, "hassio")
                           ? html`
-                              <mwc-button @click=${this._openHardware}>
+                              <ha-button
+                                @click=${this._openHardware}
+                                appearance="plain"
+                              >
                                 ${this.hass.localize(
                                   "ui.panel.config.hardware.available_hardware.title"
                                 )}
-                              </mwc-button>
+                              </ha-button>
                             `
                           : nothing}
                       </div>`
@@ -345,14 +350,15 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                     )[0];
                   return html`<div class="row">
                     ${dongle.name}${configEntry
-                      ? html`<mwc-button
+                      ? html`<ha-button
                           .entry=${configEntry}
                           @click=${this._openOptionsFlow}
+                          appearance="filled"
                         >
                           ${this.hass.localize(
                             "ui.panel.config.hardware.configure"
                           )}
-                        </mwc-button>`
+                        </ha-button>`
                       : ""}
                   </div>`;
                 })}

src/panels/config/integrations/dialog-yaml-integration.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -6,6 +5,7 @@ import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import type { YamlIntegrationDialogParams } from "./show-add-integration-dialog";
 import "../../../components/ha-dialog";
+import "../../../components/ha-button";
 
 @customElement("dialog-yaml-integration")
 export class DialogYamlIntegration extends LitElement {
@@ -43,25 +43,30 @@ export class DialogYamlIntegration extends LitElement {
             "ui.panel.config.integrations.config_flow.yaml_only"
           )}
         </p>
-        <mwc-button @click=${this.closeDialog} slot="secondaryAction">
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="primaryAction"
+        >
           ${this.hass.localize("ui.common.cancel")}
-        </mwc-button>
+        </ha-button>
         ${docLink
-          ? html`<a
+          ? html`<ha-button
+              appearance="plain"
               href=${docLink}
               target="_blank"
               rel="noreferrer noopener"
               slot="primaryAction"
+              @click=${this.closeDialog}
+              dialogInitialFocus
             >
-              <mwc-button @click=${this.closeDialog} dialogInitialFocus>
+              ${this.hass.localize(
-                ${this.hass.localize(
+                "ui.panel.config.integrations.config_flow.open_documentation"
-                  "ui.panel.config.integrations.config_flow.open_documentation"
+              )}
-                )}
+            </ha-button>`
-              </mwc-button>
+          : html`<ha-button @click=${this.closeDialog} dialogInitialFocus>
-            </a>`
-          : html`<mwc-button @click=${this.closeDialog} dialogInitialFocus>
               ${this.hass.localize("ui.common.ok")}
-            </mwc-button>`}
+            </ha-button>`}
       </ha-dialog>
     `;
   }

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -21,6 +21,7 @@ import "../../../components/ha-button-menu";
 import "../../../components/ha-check-list-item";
 import "../../../components/ha-checkbox";
 import "../../../components/ha-fab";
+import "../../../components/ha-button";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/search-input";
@@ -489,12 +490,15 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
                           "ui.panel.config.integrations.disable.disabled_integrations",
                           { number: disabledConfigEntries.length }
                         )}
-                        <mwc-button
+                        <ha-button
+                          appearance="plain"
+                          size="small"
                           @click=${this._toggleShowDisabled}
-                          .label=${this.hass.localize(
+                        >
+                          ${this.hass.localize(
                             "ui.panel.config.integrations.disable.show"
                           )}
-                        ></mwc-button>
+                        </ha-button>
                       </div>`
                     : ""}
                   ${filterMenu}
@@ -605,13 +609,16 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
                         "ui.panel.config.integrations.none_found_detail"
                       )}
                     </p>
-                    <mwc-button
+                    <ha-button
                       @click=${this._createFlow}
-                      unelevated
+                      appearance="filled"
-                      .label=${this.hass.localize(
+                      size="small"
+                    >
+                      <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
+                      ${this.hass.localize(
                         "ui.panel.config.integrations.add_integration"
                       )}
-                    ></mwc-button>
+                    </ha-button>
                   </div>
                 `
               : // If we have a filter, never show a card
@@ -634,13 +641,19 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
                             "ui.panel.config.integrations.no_integrations"
                           )}
                         </p>
-                        <mwc-button
+                        <ha-button
                           @click=${this._createFlow}
-                          unelevated
+                          appearance="filled"
-                          .label=${this.hass.localize(
+                          size="small"
+                        >
+                          <ha-svg-icon
+                            slot="prefix"
+                            .path=${mdiPlus}
+                          ></ha-svg-icon>
+                          ${this.hass.localize(
                             "ui.panel.config.integrations.add_integration"
                           )}
-                        ></mwc-button>
+                        </ha-button>
                       </div>
                     `
                   : ""}
@@ -1042,7 +1055,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
           direction: var(--direction);
           height: 32px;
         }
-        .active-filters mwc-button {
+        .active-filters ha-button {
           margin-left: 8px;
           margin-inline-start: 8px;
           margin-inline-end: initial;

src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiCloseCircle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-spinner";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-button";
 import "../../../../../components/ha-qr-code";
 import { domainToName } from "../../../../../data/integration";
 import type { MatterCommissioningParameters } from "../../../../../data/matter";
@@ -90,11 +90,11 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
                   >
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this._copyCode}>
+              <ha-button slot="primaryAction" @click=${this._copyCode}>
                 ${this.hass.localize(
                   "ui.panel.config.matter.open_commissioning_window.copy_code"
                 )}
-              </mwc-button>
+              </ha-button>
             `
           : this._status === "started"
             ? html`
@@ -110,9 +110,9 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
                     </p>
                   </div>
                 </div>
-                <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                <ha-button slot="primaryAction" @click=${this.closeDialog}>
                   ${this.hass.localize("ui.common.close")}
-                </mwc-button>
+                </ha-button>
               `
             : this._status === "failed"
               ? html`
@@ -129,9 +129,9 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
                       </p>
                     </div>
                   </div>
-                  <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                  <ha-button slot="primaryAction" @click=${this.closeDialog}>
                     ${this.hass.localize("ui.common.close")}
-                  </mwc-button>
+                  </ha-button>
                 `
               : html`
                   <p>
@@ -151,11 +151,11 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
                       "ui.panel.config.matter.open_commissioning_window.prevent_misuse_description"
                     )}
                   </p>
-                  <mwc-button slot="primaryAction" @click=${this._start}>
+                  <ha-button slot="primaryAction" @click=${this._start}>
                     ${this.hass.localize(
                       "ui.panel.config.matter.open_commissioning_window.start_commissioning"
                     )}
-                  </mwc-button>
+                  </ha-button>
                 `}
       </ha-dialog>
     `;

src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -7,6 +6,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-list";
+import "../../../../../components/ha-button";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-spinner";
 import { pingMatterNode } from "../../../../../data/matter";
@@ -71,9 +71,9 @@ class DialogMatterPingNode extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : this._pingResultEntries
             ? html`
@@ -98,9 +98,9 @@ class DialogMatterPingNode extends LitElement {
                       </ha-list-item>`
                   )}
                 </ha-list>
-                <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                <ha-button slot="primaryAction" @click=${this.closeDialog}>
                   ${this.hass.localize("ui.common.close")}
-                </mwc-button>
+                </ha-button>
               `
             : this._status === "started"
               ? html`
@@ -116,9 +116,9 @@ class DialogMatterPingNode extends LitElement {
                       </p>
                     </div>
                   </div>
-                  <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                  <ha-button slot="primaryAction" @click=${this.closeDialog}>
                     ${this.hass.localize("ui.common.close")}
-                  </mwc-button>
+                  </ha-button>
                 `
               : html`
                   <p>
@@ -133,11 +133,11 @@ class DialogMatterPingNode extends LitElement {
                       )}
                     </em>
                   </p>
-                  <mwc-button slot="primaryAction" @click=${this._startPing}>
+                  <ha-button slot="primaryAction" @click=${this._startPing}>
                     ${this.hass.localize(
                       "ui.panel.config.matter.ping_node.start_ping"
                     )}
-                  </mwc-button>
+                  </ha-button>
                 `}
       </ha-dialog>
     `;

src/panels/config/integrations/integration-panels/matter/dialog-matter-reinterview-node.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-button/mwc-button";
 import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-button";
 import "../../../../../components/ha-spinner";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import { interviewMatterNode } from "../../../../../data/matter";
@@ -53,11 +53,11 @@ class DialogMatterReinterviewNode extends LitElement {
                   )}
                 </em>
               </p>
-              <mwc-button slot="primaryAction" @click=${this._startReinterview}>
+              <ha-button slot="primaryAction" @click=${this._startReinterview}>
                 ${this.hass.localize(
                   "ui.panel.config.matter.reinterview_node.start_reinterview"
                 )}
-              </mwc-button>
+              </ha-button>
             `
           : this._status === "started"
             ? html`
@@ -78,9 +78,9 @@ class DialogMatterReinterviewNode extends LitElement {
                     </p>
                   </div>
                 </div>
-                <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                <ha-button slot="primaryAction" @click=${this.closeDialog}>
                   ${this.hass.localize("ui.common.close")}
-                </mwc-button>
+                </ha-button>
               `
             : this._status === "failed"
               ? html`
@@ -97,9 +97,9 @@ class DialogMatterReinterviewNode extends LitElement {
                       </p>
                     </div>
                   </div>
-                  <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                  <ha-button slot="primaryAction" @click=${this.closeDialog}>
                     ${this.hass.localize("ui.common.close")}
-                  </mwc-button>
+                  </ha-button>
                 `
               : this._status === "finished"
                 ? html`
@@ -116,9 +116,9 @@ class DialogMatterReinterviewNode extends LitElement {
                         </p>
                       </div>
                     </div>
-                    <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                    <ha-button slot="primaryAction" @click=${this.closeDialog}>
                       ${this.hass.localize("ui.common.close")}
-                    </mwc-button>
+                    </ha-button>
                   `
                 : nothing}
       </ha-dialog>

src/panels/config/integrations/integration-panels/matter/matter-config-dashboard.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
@@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-card";
+import "../../../../../components/ha-button";
 import {
   acceptSharedMatterDevice,
   canCommissionMatterExternal,
@@ -40,9 +40,14 @@ export class MatterConfigDashboard extends LitElement {
       <hass-subpage .narrow=${this.narrow} .hass=${this.hass} header="Matter">
         ${isComponentLoaded(this.hass, "otbr")
           ? html`
-              <a href="/config/thread" slot="toolbar-icon">
+              <ha-button
-                <mwc-button>Visit Thread Panel</mwc-button>
+                appearance="plain"
-              </a>
+                size="small"
+                href="/config/thread"
+                slot="toolbar-icon"
+              >
+                Visit Thread Panel</ha-button
+              >
             `
           : ""}
         <div class="content">
@@ -62,21 +67,23 @@ export class MatterConfigDashboard extends LitElement {
             </div>
             <div class="card-actions">
               ${canCommissionMatterExternal(this.hass)
-                ? html`<mwc-button @click=${this._startMobileCommissioning}
+                ? html`<ha-button
-                    >Commission device with mobile app</mwc-button
+                    appearance="plain"
+                    @click=${this._startMobileCommissioning}
+                    >Commission device with mobile app</ha-button
                   >`
                 : ""}
-              <mwc-button @click=${this._commission}
+              <ha-button appearance="plain" @click=${this._commission}
-                >Commission device</mwc-button
+                >Commission device</ha-button
               >
-              <mwc-button @click=${this._acceptSharedDevice}
+              <ha-button appearance="plain" @click=${this._acceptSharedDevice}
-                >Add shared device</mwc-button
+                >Add shared device</ha-button
               >
-              <mwc-button @click=${this._setWifi}
+              <ha-button appearance="plain" @click=${this._setWifi}
-                >Set WiFi Credentials</mwc-button
+                >Set WiFi Credentials</ha-button
               >
-              <mwc-button @click=${this._setThread}
+              <ha-button appearance="plain" @click=${this._setThread}
-                >Set Thread Credentials</mwc-button
+                >Set Thread Credentials</ha-button
               >
             </div>
           </ha-card>

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -8,6 +7,7 @@ import "../../../../../components/ha-code-editor";
 import "../../../../../components/ha-formfield";
 import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-switch";
+import "../../../../../components/ha-button";
 import { getConfigEntries } from "../../../../../data/config_entries";
 import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow";
 import "../../../../../layouts/hass-subpage";
@@ -71,10 +71,10 @@ export class MQTTConfigPanel extends LitElement {
             .header=${this.hass.localize("ui.panel.config.mqtt.settings_title")}
           >
             <div class="card-actions">
-              <mwc-button @click=${this._openOptionFlow}
+              <ha-button appearance="plain" @click=${this._openOptionFlow}
                 >${this.hass.localize(
                   "ui.panel.config.mqtt.option_flow"
-                )}</mwc-button
+                )}</ha-button
               >
             </div>
           </ha-card>
@@ -138,10 +138,10 @@ export class MQTTConfigPanel extends LitElement {
               ></ha-code-editor>
             </div>
             <div class="card-actions">
-              <mwc-button @click=${this._publish}
+              <ha-button appearance="plain" @click=${this._publish}
                 >${this.hass.localize(
                   "ui.panel.config.mqtt.publish"
-                )}</mwc-button
+                )}</ha-button
               >
             </div>
           </ha-card>

src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts

@@ -1,11 +1,10 @@
-import "@material/mwc-button";
 import type { ActionDetail } from "@material/mwc-list";
 import {
+  mdiCellphoneKey,
   mdiDeleteOutline,
   mdiDevices,
   mdiDotsVertical,
   mdiInformationOutline,
-  mdiCellphoneKey,
 } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -14,9 +13,10 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
 import { stringCompare } from "../../../../../common/string/compare";
 import { extractSearchParam } from "../../../../../common/url/search-params";
+import "../../../../../components/ha-button";
 import "../../../../../components/ha-button-menu";
-import "../../../../../components/ha-list-item";
 import "../../../../../components/ha-card";
+import "../../../../../components/ha-list-item";
 import { getSignedPath } from "../../../../../data/auth";
 import { getConfigEntryDiagnosticsDownloadUrl } from "../../../../../data/diagnostics";
 import type { OTBRInfo, OTBRInfoDict } from "../../../../../data/otbr";
@@ -47,8 +47,8 @@ import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import { brandsUrl } from "../../../../../util/brands-url";
-import { fileDownload } from "../../../../../util/file_download";
 import { documentationUrl } from "../../../../../util/documentation-url";
+import { fileDownload } from "../../../../../util/file_download";
 import { showThreadDatasetDialog } from "./show-dialog-thread-dataset";
 
 export interface ThreadNetwork {
@@ -117,16 +117,16 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
                     )}
                   </h3>
                   <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
-                  <a
+                  <ha-button
+                    appearance="plain"
+                    size="small"
                     href=${documentationUrl(this.hass, `/integrations/thread`)}
                     target="_blank"
                   >
-                    <mwc-button
+                    ${this.hass.localize(
-                      >${this.hass.localize(
+                      "ui.panel.config.thread.more_info"
-                        "ui.panel.config.thread.more_info"
+                    )}</ha-button
-                      )}</mwc-button
+                  >
-                    >
-                  </a>
                 </div>
               </ha-card>`}
           ${networks.networks.length
@@ -294,21 +294,23 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
               ? html`${this.hass.localize(
                     "ui.panel.config.thread.no_routers_otbr_network"
                   )}
-                  <mwc-button
+                  <ha-button
+                    appearance="plain"
+                    size="small"
                     .otbr=${otbrForNetwork}
                     @click=${this._resetBorderRouterEvent}
                     >${this.hass.localize(
                       "ui.panel.config.thread.reset_border_router"
-                    )}</mwc-button
+                    )}</ha-button
                   >`
               : this.hass.localize("ui.panel.config.thread.no_border_routers")}
           </div> `}
       ${network.dataset && !network.dataset.preferred
         ? html`<div class="card-actions">
-            <mwc-button
+            <ha-button
               .datasetId=${network.dataset.dataset_id}
               @click=${this._setPreferred}
-              >Make preferred network</mwc-button
+              >Make preferred network</ha-button
             >
           </div>`
         : ""}
@@ -316,10 +318,11 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
       network.dataset?.preferred &&
       network.routers?.length
         ? html`<div class="card-actions">
-            <mwc-button
+            <ha-button
+              size="small"
               .networkDataset=${network.dataset}
               @click=${this._sendCredentials}
-              >Send credentials to phone</mwc-button
+              >Send credentials to phone</ha-button
             >
           </div>`
         : ""}

src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
@@ -9,6 +8,7 @@ import "../../../../../components/ha-spinner";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-tooltip";
+import "../../../../../components/ha-button";
 import type {
   AttributeConfigurationStatus,
   Cluster,
@@ -95,14 +95,14 @@ class DialogZHAReconfigureDevice extends LitElement {
                   )}
                 </em>
               </p>
-              <mwc-button
+              <ha-button
                 slot="primaryAction"
                 @click=${this._startReconfiguration}
               >
                 ${this.hass.localize(
                   "ui.dialogs.zha_reconfigure_device.start_reconfiguration"
                 )}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "started"
@@ -124,10 +124,11 @@ class DialogZHAReconfigureDevice extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button
-                ${this.hass.localize("ui.common.close")}
+                appearance="plain"
-              </mwc-button>
+                slot="secondaryAction"
-              <mwc-button slot="secondaryAction" @click=${this._toggleDetails}>
+                @click=${this._toggleDetails}
+              >
                 ${this._showDetails
                   ? this.hass.localize(
                       `ui.dialogs.zha_reconfigure_device.button_hide`
@@ -135,7 +136,10 @@ class DialogZHAReconfigureDevice extends LitElement {
                   : this.hass.localize(
                       `ui.dialogs.zha_reconfigure_device.button_show`
                     )}
-              </mwc-button>
+              </ha-button>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
+                ${this.hass.localize("ui.common.close")}
+              </ha-button>
             `
           : ``}
         ${this._status === "failed"
@@ -153,10 +157,10 @@ class DialogZHAReconfigureDevice extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
-              <mwc-button slot="secondaryAction" @click=${this._toggleDetails}>
+              <ha-button slot="secondaryAction" @click=${this._toggleDetails}>
                 ${this._showDetails
                   ? this.hass.localize(
                       `ui.dialogs.zha_reconfigure_device.button_hide`
@@ -164,7 +168,7 @@ class DialogZHAReconfigureDevice extends LitElement {
                   : this.hass.localize(
                       `ui.dialogs.zha_reconfigure_device.button_show`
                     )}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "finished"
@@ -182,10 +186,10 @@ class DialogZHAReconfigureDevice extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
-              <mwc-button slot="secondaryAction" @click=${this._toggleDetails}>
+              <ha-button slot="secondaryAction" @click=${this._toggleDetails}>
                 ${this._showDetails
                   ? this.hass.localize(
                       `ui.dialogs.zha_reconfigure_device.button_hide`
@@ -193,7 +197,7 @@ class DialogZHAReconfigureDevice extends LitElement {
                   : this.hass.localize(
                       `ui.dialogs.zha_reconfigure_device.button_show`
                     )}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._stages

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -1,8 +1,9 @@
-import "@material/mwc-button";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../../../../../components/ha-button";
 import "../../../../../components/ha-spinner";
+import "../../../../../components/ha-textarea";
 import type { ZHADevice } from "../../../../../data/zha";
 import { DEVICE_MESSAGE_TYPES, LOG_OUTPUT } from "../../../../../data/zha";
 import "../../../../../layouts/hass-tabs-subpage";
@@ -11,7 +12,6 @@ import type { HomeAssistant, Route } from "../../../../../types";
 import { documentationUrl } from "../../../../../util/documentation-url";
 import { zhaTabs } from "./zha-config-dashboard";
 import "./zha-device-pairing-status-card";
-import "../../../../../components/ha-textarea";
 
 @customElement("zha-add-devices-page")
 class ZHAAddDevicesPage extends LitElement {
@@ -80,8 +80,12 @@ class ZHAAddDevicesPage extends LitElement {
         .route=${this.route!}
         .tabs=${zhaTabs}
       >
-        <mwc-button slot="toolbar-icon" @click=${this._toggleLogs}
+        <ha-button
-          >${this._showLogs ? "Hide logs" : "Show logs"}</mwc-button
+          appearance="plain"
+          size="small"
+          slot="toolbar-icon"
+          @click=${this._toggleLogs}
+          >${this._showLogs ? "Hide logs" : "Show logs"}</ha-button
         >
         <div class="searching">
           ${this._active
@@ -95,11 +99,15 @@ class ZHAAddDevicesPage extends LitElement {
               `
             : html`
                 <div>
-                  <mwc-button @click=${this._subscribe} class="search-button">
+                  <ha-button
+                    appearance="plain"
+                    @click=${this._subscribe}
+                    class="search-button"
+                  >
                     ${this.hass!.localize(
                       "ui.panel.config.zha.add_device_page.search_again"
                     )}
-                  </mwc-button>
+                  </ha-button>
                 </div>
               `}
         </div>

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import {
   mdiAlertCircle,
   mdiCheckCircle,
@@ -14,6 +13,7 @@ import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-card";
+import "../../../../../components/ha-button";
 import "../../../../../components/ha-fab";
 import "../../../../../components/ha-form/ha-form";
 import "../../../../../components/ha-icon-button";
@@ -149,24 +149,24 @@ class ZHAConfigDashboard extends LitElement {
           </div>
           ${this.configEntryId
             ? html`<div class="card-actions">
-                <a
+                <ha-button
                   href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
+                  appearance="plain"
+                  size="small"
                 >
-                  <mwc-button
+                  ${this.hass.localize(
-                    >${this.hass.localize(
+                    "ui.panel.config.devices.caption"
-                      "ui.panel.config.devices.caption"
+                  )}</ha-button
-                    )}</mwc-button
+                >
-                  >
+                <ha-button
-                </a>
+                  appearance="plain"
-                <a
+                  size="small"
                   href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
                 >
-                  <mwc-button
+                  ${this.hass.localize(
-                    >${this.hass.localize(
+                    "ui.panel.config.entities.caption"
-                      "ui.panel.config.entities.caption"
+                  )}</ha-button
-                    )}</mwc-button
+                >
-                  >
-                </a>
               </div>`
             : ""}
         </ha-card>
@@ -246,6 +246,7 @@ class ZHAConfigDashboard extends LitElement {
             : ""}
           <div class="card-actions">
             <ha-progress-button
+              appearance="plain"
               @click=${this._createAndDownloadBackup}
               .progress=${this._generatingBackup}
               .disabled=${!this._networkSettings || this._generatingBackup}
@@ -254,11 +255,11 @@ class ZHAConfigDashboard extends LitElement {
                 "ui.panel.config.zha.configuration_page.download_backup"
               )}
             </ha-progress-button>
-            <mwc-button class="warning" @click=${this._openOptionFlow}>
+            <ha-button variant="danger" @click=${this._openOptionFlow}>
               ${this.hass.localize(
                 "ui.panel.config.zha.configuration_page.migrate_radio"
               )}
-            </mwc-button>
+            </ha-button>
           </div>
         </ha-card>
         ${this._configuration
@@ -287,11 +288,11 @@ class ZHAConfigDashboard extends LitElement {
           : ""}
         <ha-card>
           <div class="card-actions">
-            <mwc-button @click=${this._updateConfiguration}>
+            <ha-button @click=${this._updateConfiguration}>
               ${this.hass.localize(
                 "ui.panel.config.zha.configuration_page.update_button"
               )}
-            </mwc-button>
+            </ha-button>
           </div>
         </ha-card>
 

src/panels/config/integrations/integration-panels/zha/zha-group-page.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiDelete } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -6,11 +5,11 @@ import { customElement, property, query, state } from "lit/decorators";
 import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import { navigate } from "../../../../../common/navigate";
 import type { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table";
+import "../../../../../components/ha-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-list";
 import "../../../../../components/ha-list-item";
-import "../../../../../components/ha-spinner";
 import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha";
 import {
   addMembersToGroup,
@@ -164,22 +163,19 @@ export class ZHAGroupPage extends LitElement {
                 </zha-device-endpoint-data-table>
 
                 <div class="buttons">
-                  <mwc-button
+                  <ha-button
+                    appearance="plain"
+                    size="small"
+                    variant="danger"
                     .disabled=${!this._selectedDevicesToRemove.length ||
                     this._processingRemove}
                     @click=${this._removeMembersFromGroup}
                     class="button"
+                    .loading=${this._processingRemove}
                   >
-                    ${this._processingRemove
-                      ? html`<ha-spinner
-                          .ariaLabel=${this.hass.localize(
-                            "ui.panel.config.zha.groups.removing_members"
-                          )}
-                        ></ha-spinner>`
-                      : nothing}
                     ${this.hass!.localize(
                       "ui.panel.config.zha.groups.remove_members"
-                    )}</mwc-button
+                    )}</ha-button
                   >
                 </div>
               `
@@ -200,21 +196,18 @@ export class ZHAGroupPage extends LitElement {
           </zha-device-endpoint-data-table>
 
           <div class="buttons">
-            <mwc-button
+            <ha-button
+              appearance="plain"
+              size="small"
               .disabled=${!this._selectedDevicesToAdd.length ||
               this._processingAdd}
               @click=${this._addMembersToGroup}
               class="button"
+              .loading=${this._processingAdd}
             >
-              ${this._processingAdd
-                ? html`<ha-spinner
-                    size="small"
-                    aria-label="Saving"
-                  ></ha-spinner>`
-                : ""}
               ${this.hass!.localize(
                 "ui.panel.config.zha.groups.add_members"
-              )}</mwc-button
+              )}</ha-button
             >
           </div>
         </ha-config-section>

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts

@@ -1,11 +1,11 @@
 import { mdiCheckCircle, mdiDeleteForever, mdiRestore } from "@mdi/js";
-import "@material/mwc-button/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-svg-icon";
+import "../../../../../components/ha-button";
 import { hardResetController } from "../../../../../data/zwave_js";
 import { haStyleDialog } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
@@ -77,15 +77,16 @@ class DialogZWaveJSHardResetController extends LitElement {
         </p>
       </div>
       ${this._resetStatus === ResetStatus.NotStarted
-        ? html`<mwc-button
+        ? html`<ha-button
+              appearance="plain"
               slot="primaryAction"
-              @click=${this._hardResetController}
+              @click=${this.closeDialog}
             >
-              ${this.hass.localize("ui.common.continue")}
-            </mwc-button>
-            <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
               ${this.hass.localize("ui.common.cancel")}
-            </mwc-button>`
+            </ha-button>
+            <ha-button slot="primaryAction" @click=${this._hardResetController}>
+              ${this.hass.localize("ui.common.continue")}
+            </ha-button>`
         : nothing}
     </ha-dialog>`;
   }

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiCheckCircle, mdiCloseCircle, mdiStethoscope } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
@@ -6,10 +5,11 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-button";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import type {
-  ZWaveJSRebuildRoutesStatusMessage,
   ZWaveJSNetwork,
+  ZWaveJSRebuildRoutesStatusMessage,
 } from "../../../../../data/zwave_js";
 import {
   fetchZwaveNetworkStatus,
@@ -91,14 +91,14 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
                   )}
                 </em>
               </p>
-              <mwc-button
+              <ha-button
                 slot="primaryAction"
                 @click=${this._startRebuildingRoutes}
               >
                 ${this.hass.localize(
                   "ui.panel.config.zwave_js.rebuild_network_routes.start_rebuilding_routes"
                 )}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "started"
@@ -122,17 +122,19 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
                     <mwc-linear-progress indeterminate> </mwc-linear-progress>
                   `
                 : ""}
-              <mwc-button
+              <ha-button
                 slot="secondaryAction"
+                appearance="plain"
                 @click=${this._stopRebuildingRoutes}
+                variant="danger"
               >
                 ${this.hass.localize(
                   "ui.panel.config.zwave_js.rebuild_network_routes.stop_rebuilding_routes"
                 )}
-              </mwc-button>
+              </ha-button>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "failed"
@@ -150,9 +152,9 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "finished"
@@ -170,9 +172,9 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "cancelled"
@@ -190,9 +192,9 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._progress_total && this._status !== "finished"

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiCheckCircle, mdiCloseCircle, mdiStethoscope } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-button";
 import "../../../../../components/ha-spinner";
 import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
 import type { ZWaveJSNetwork } from "../../../../../data/zwave_js";
@@ -83,14 +83,14 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
                   )}
                 </em>
               </p>
-              <mwc-button
+              <ha-button
                 slot="primaryAction"
                 @click=${this._startRebuildingRoutes}
               >
                 ${this.hass.localize(
                   "ui.panel.config.zwave_js.rebuild_node_routes.start_rebuilding_routes"
                 )}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "started"
@@ -110,9 +110,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "failed"
@@ -147,9 +147,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "finished"
@@ -172,9 +172,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "rebuilding-routes"
@@ -192,9 +192,9 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
       </ha-dialog>

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
@@ -6,6 +5,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-spinner";
+import "../../../../../components/ha-button";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import { reinterviewZwaveNode } from "../../../../../data/zwave_js";
 import { haStyleDialog } from "../../../../../resources/styles";
@@ -59,11 +59,11 @@ class DialogZWaveJSReinterviewNode extends LitElement {
                   )}
                 </em>
               </p>
-              <mwc-button slot="primaryAction" @click=${this._startReinterview}>
+              <ha-button slot="primaryAction" @click=${this._startReinterview}>
                 ${this.hass.localize(
                   "ui.panel.config.zwave_js.reinterview_node.start_reinterview"
                 )}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "started"
@@ -85,9 +85,9 @@ class DialogZWaveJSReinterviewNode extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "failed"
@@ -105,9 +105,9 @@ class DialogZWaveJSReinterviewNode extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "finished"
@@ -125,9 +125,9 @@ class DialogZWaveJSReinterviewNode extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._stages

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiCheckCircle, mdiCloseCircle, mdiRobotDead } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
@@ -6,6 +5,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-spinner";
+import "../../../../../components/ha-button";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import type { ZWaveJSRemovedNode } from "../../../../../data/zwave_js";
 import { removeFailedZwaveNode } from "../../../../../data/zwave_js";
@@ -80,11 +80,15 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
                   )}
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this._startExclusion}>
+              <ha-button
+                variant="danger"
+                slot="primaryAction"
+                @click=${this._startExclusion}
+              >
                 ${this.hass.localize(
                   "ui.panel.config.zwave_js.remove_failed_node.remove_device"
                 )}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "started"
@@ -121,9 +125,9 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
                     : ``}
                 </div>
               </div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
         ${this._status === "finished"
@@ -142,12 +146,12 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
                   </p>
                 </div>
               </div>
-              <mwc-button
+              <ha-button
                 slot="primaryAction"
                 @click=${this.closeDialogFinished}
               >
                 ${this.hass.localize("ui.common.close")}
-              </mwc-button>
+              </ha-button>
             `
           : ``}
       </ha-dialog>

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import "@material/mwc-linear-progress/mwc-linear-progress";
 import { mdiCheckCircle, mdiCloseCircle, mdiFileUpload } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
@@ -9,6 +8,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-file-upload";
+import "../../../../../components/ha-button";
 import "../../../../../components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import "../../../../../components/ha-svg-icon";
@@ -130,7 +130,7 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
               .schema=${firmwareTargetSchema}
               @value-changed=${this._firmwareTargetChanged}
             ></ha-form>`}
-      <mwc-button
+      <ha-button
         slot="primaryAction"
         @click=${this._beginFirmwareUpdate}
         .disabled=${this._firmwareFile === undefined}
@@ -138,7 +138,7 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
         ${this.hass.localize(
           "ui.panel.config.zwave_js.update_firmware.begin_update"
         )}
-      </mwc-button>`;
+      </ha-button>`;
 
     const status = this._updateFinishedMessage
       ? this._updateFinishedMessage.success
@@ -153,11 +153,11 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
     const abortFirmwareUpdateButton = this._nodeStatus.is_controller_node
       ? nothing
       : html`
-          <mwc-button slot="primaryAction" @click=${this._abortFirmwareUpdate}>
+          <ha-button slot="primaryAction" @click=${this._abortFirmwareUpdate}>
             ${this.hass.localize(
               "ui.panel.config.zwave_js.update_firmware.abort"
             )}
-          </mwc-button>
+          </ha-button>
         `;
 
     return html`

src/panels/config/logs/ha-config-logs.ts

@@ -117,16 +117,14 @@ export class HaConfigLogs extends LitElement {
         ${isComponentLoaded(this.hass, "hassio")
           ? html`
               <ha-button-menu slot="toolbar-icon">
-                <ha-button
+                <ha-button slot="trigger" appearance="filled">
-                  slot="trigger"
-                  .label=${this._logProviders.find(
-                    (p) => p.key === this._selectedLogProvider
-                  )!.name}
-                >
                   <ha-svg-icon
-                    slot="trailingIcon"
+                    slot="suffix"
                     .path=${mdiChevronDown}
                   ></ha-svg-icon>
+                  ${this._logProviders.find(
+                    (p) => p.key === this._selectedLogProvider
+                  )!.name}
                 </ha-button>
                 ${this._logProviders.map(
                   (provider) => html`
@@ -255,15 +253,6 @@ export class HaConfigLogs extends LitElement {
         .content {
           direction: ltr;
         }
-
-        mwc-button[slot="trigger"] {
-          --mdc-theme-primary: var(--primary-text-color);
-          --mdc-icon-size: 36px;
-        }
-        ha-button-menu > ha-button > ha-svg-icon {
-          margin-inline-end: 0px;
-          margin-inline-start: 8px;
-        }
       `,
     ];
   }

src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -9,6 +8,7 @@ import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-form/ha-form";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-button";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { LovelaceResourcesMutableParams } from "../../../../data/lovelace/resource";
 import type { HomeAssistant } from "../../../../types";
@@ -127,10 +127,10 @@ export class DialogLovelaceResourceDetail extends LitElement {
           ></ha-form>
         </div>
         <div slot="actions">
-          <mwc-button @click=${this.closeDialog}>
+          <ha-button appearance="plain" @click=${this.closeDialog}>
             ${this.hass!.localize("ui.common.cancel")}
-          </mwc-button>
+          </ha-button>
-          <mwc-button
+          <ha-button
             @click=${this._updateResource}
             .disabled=${urlInvalid || !this._data?.res_type || this._submitting}
           >
@@ -141,7 +141,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
               : this.hass!.localize(
                   "ui.panel.config.lovelace.resources.detail.create"
                 )}
-          </mwc-button>
+          </ha-button>
         </div>
       </ha-md-dialog>
     `;

src/panels/config/network/ha-config-network.ts

@@ -1,10 +1,10 @@
-import "@material/mwc-button/mwc-button";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
+import "../../../components/ha-button";
 import "../../../components/ha-checkbox";
 import "../../../components/ha-network";
 import "../../../components/ha-settings-row";
@@ -55,11 +55,11 @@ class ConfigNetwork extends LitElement {
           ></ha-network>
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._save}>
+          <ha-button @click=${this._save}>
             ${this.hass.localize(
               "ui.panel.config.core.section.core.core_config.save_button"
             )}
-          </mwc-button>
+          </ha-button>
         </div>
       </ha-card>
     `;

src/panels/config/network/ha-config-url-form.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -171,8 +170,13 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
                   `
                 : nothing}
             </div>
-            <ha-button .url=${externalUrl} @click=${this._copyURL}>
+            <ha-button
-              <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
+              size="small"
+              appearance="plain"
+              .url=${externalUrl}
+              @click=${this._copyURL}
+            >
+              <ha-svg-icon slot="prefix" .path=${mdiContentCopy}></ha-svg-icon>
               ${this.hass.localize("ui.panel.config.common.copy_link")}
             </ha-button>
           </div>
@@ -206,13 +210,16 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
                         ${this.hass.localize(
                           "ui.panel.config.url.ha_cloud_remote_not_enabled"
                         )}
-                        <a href="/config/cloud" slot="action"
+                        <ha-button
-                          ><mwc-button
+                          size="small"
-                            .label=${this.hass.localize(
+                          appearance="plain"
-                              "ui.panel.config.url.enable_remote"
+                          href="/config/cloud"
-                            )}
+                          slot="action"
-                          ></mwc-button
+                        >
-                        ></a>
+                          ${this.hass.localize(
+                            "ui.panel.config.url.enable_remote"
+                          )}
+                        </ha-button>
                       </ha-alert>
                     `}
               `
@@ -271,7 +278,12 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
                   `
                 : nothing}
             </div>
-            <ha-button .url=${internalUrl} @click=${this._copyURL}>
+            <ha-button
+              size="small"
+              appearance="plain"
+              .url=${internalUrl}
+              @click=${this._copyURL}
+            >
               <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
               ${this.hass.localize("ui.panel.config.common.copy_link")}
             </ha-button>
@@ -302,11 +314,11 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
           }
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._save} .disabled=${disabled}>
+          <ha-button @click=${this._save} .disabled=${disabled}>
             ${this.hass.localize(
               "ui.panel.config.core.section.core.core_config.save_button"
             )}
-          </mwc-button>
+          </ha-button>
         </div>
       </ha-card>
     `;

src/panels/config/network/supervisor-hostname.ts

@@ -1,11 +1,9 @@
-import "@material/mwc-button/mwc-button";
-
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
-import "../../../components/ha-spinner";
+import "../../../components/ha-button";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-radio";
@@ -66,11 +64,13 @@ export class HassioHostname extends LitElement {
           </ha-textfield>
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._save} .disabled=${this._processing}>
+          <ha-button
-            ${this._processing
+            .loading=${this._processing}
-              ? html`<ha-spinner size="small"></ha-spinner>`
+            @click=${this._save}
-              : this.hass.localize("ui.common.save")}
+            .disabled=${this._processing}
-          </mwc-button>
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
         </div>
       </ha-card>
     `;

src/panels/config/network/supervisor-network.ts

@@ -17,6 +17,7 @@ import type { HaRadio } from "../../../components/ha-radio";
 import "../../../components/ha-spinner";
 import "../../../components/ha-textfield";
 import type { HaTextField } from "../../../components/ha-textfield";
+import "../../../components/sl-tab-group";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import {
   type AccessPoint,
@@ -33,7 +34,6 @@ import {
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/sl-tab-group";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -141,6 +141,7 @@ export class HassioNetwork extends LitElement {
                     </p>`
                   : nothing}
                 <ha-button
+                  appearance="plain"
                   class="scan"
                   @click=${this._scanForAP}
                   .disabled=${this._scanning}
@@ -260,12 +261,14 @@ export class HassioNetwork extends LitElement {
           : nothing}
       </div>
       <div class="card-actions">
-        <ha-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
+        <ha-button
-          ${this._processing
+          .loading=${this._processing}
-            ? html`<ha-spinner size="small"></ha-spinner>`
+          @click=${this._updateNetwork}
-            : this.hass.localize("ui.common.save")}
+          .disabled=${!this._dirty}
+        >
+          ${this.hass.localize("ui.common.save")}
         </ha-button>
-        <ha-button @click=${this._clear}>
+        <ha-button appearance="plain" @click=${this._clear}>
           ${this.hass.localize("ui.panel.config.network.supervisor.reset")}
         </ha-button>
       </div>`;
@@ -446,11 +449,13 @@ export class HassioNetwork extends LitElement {
                       @click=${this._addAddress}
                       .version=${version}
                       class="add-address"
+                      appearance="filled"
+                      size="small"
                     >
                       ${this.hass.localize(
                         "ui.panel.config.network.supervisor.add_address"
                       )}
-                      <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+                      <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
                     </ha-button>
                   `
                 : nothing}
@@ -500,13 +505,15 @@ export class HassioNetwork extends LitElement {
                 @closed=${this._handleDNSMenuClosed}
                 .version=${version}
                 class="add-nameserver"
+                appearance="filled"
+                size="small"
               >
-                <ha-button slot="trigger">
+                <ha-button appearance="filled" size="small" slot="trigger">
                   ${this.hass.localize(
                     "ui.panel.config.network.supervisor.add_dns_server"
                   )}
                   <ha-svg-icon
-                    slot="icon"
+                    slot="prefix"
                     .path=${this._dnsMenuOpen ? mdiMenuDown : mdiPlus}
                   ></ha-svg-icon>
                 </ha-button>
@@ -780,10 +787,6 @@ export class HassioNetwork extends LitElement {
           padding: 20px 24px;
         }
 
-        ha-button.warning {
-          --mdc-theme-primary: var(--error-color);
-        }
-
         ha-button.scan {
           margin-left: 8px;
           margin-inline-start: 8px;

src/panels/config/repairs/dialog-system-information.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -9,10 +8,11 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import { subscribePollingCollection } from "../../../common/util/subscribe-polling";
 import "../../../components/ha-alert";
+import "../../../components/ha-button";
 import "../../../components/ha-card";
-import "../../../components/ha-spinner";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-metric";
+import "../../../components/ha-spinner";
 import type { HassioStats } from "../../../data/hassio/common";
 import { fetchHassioStats } from "../../../data/hassio/common";
 import type { HassioResolution } from "../../../data/hassio/resolution";
@@ -146,27 +146,29 @@ class DialogSystemInformation extends LitElement {
             ? html`${this._resolutionInfo.unhealthy.length
                 ? html`<ha-alert alert-type="error">
                     ${this.hass.localize("ui.dialogs.unhealthy.title")}
-                    <mwc-button
+                    <ha-button
+                      appearance="plain"
+                      size="small"
+                      variant="danger"
                       slot="action"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.common.learn_more"
-                      )}
                       @click=${this._unhealthyDialog}
                     >
-                    </mwc-button
+                      ${this.hass.localize("ui.panel.config.common.learn_more")}
-                  ></ha-alert>`
+                    </ha-button></ha-alert
+                  >`
                 : ""}
               ${this._resolutionInfo.unsupported.length
                 ? html`<ha-alert alert-type="warning">
                     ${this.hass.localize("ui.dialogs.unsupported.title")}
-                    <mwc-button
+                    <ha-button
+                      appearance="plain"
+                      size="small"
+                      variant="warning"
                       slot="action"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.common.learn_more"
-                      )}
                       @click=${this._unsupportedDialog}
                     >
-                    </mwc-button>
+                      ${this.hass.localize("ui.panel.config.common.learn_more")}
+                    </ha-button>
                   </ha-alert>`
                 : ""} `
             : ""}
@@ -222,11 +224,9 @@ class DialogSystemInformation extends LitElement {
                 </div>
               `}
         </div>
-        <mwc-button
+        <ha-button slot="primaryAction" @click=${this._copyInfo}>
-          slot="primaryAction"
+          ${this.hass.localize("ui.panel.config.repairs.copy")}
-          .label=${this.hass.localize("ui.panel.config.repairs.copy")}
+        </ha-button>
-          @click=${this._copyInfo}
-        ></mwc-button>
       </ha-dialog>
     `;
   }
@@ -361,13 +361,16 @@ class DialogSystemInformation extends LitElement {
               ${!domainInfo.manage_url
                 ? ""
                 : html`
-                    <a class="manage" href=${domainInfo.manage_url}>
+                    <ha-button
-                      <mwc-button>
+                      appearance="plain"
-                        ${this.hass.localize(
+                      size="small"
-                          "ui.panel.config.info.system_health.manage"
+                      class="manage"
-                        )}
+                      href=${domainInfo.manage_url}
-                      </mwc-button>
+                    >
-                    </a>
+                      ${this.hass.localize(
+                        "ui.panel.config.info.system_health.manage"
+                      )}
+                    </ha-button>
                   `}
             </div>
           `);
@@ -481,10 +484,6 @@ class DialogSystemInformation extends LitElement {
       .error {
         color: var(--error-color);
       }
-
-      a.manage {
-        text-decoration: none;
-      }
     `,
   ];
 }

src/panels/config/script/ha-script-editor.ts

@@ -1,5 +1,4 @@
 import { consume } from "@lit/context";
-import "@material/mwc-button";
 import {
   mdiCog,
   mdiContentDuplicate,
@@ -27,6 +26,7 @@ import { slugify } from "../../../common/string/slugify";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
+import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-fab";
 
@@ -45,12 +45,12 @@ import {
 } from "../../../data/entity_registry";
 import type { BlueprintScriptConfig, ScriptConfig } from "../../../data/script";
 import {
-  normalizeScriptConfig,
   deleteScript,
   fetchScriptFileConfig,
   getScriptEditorInitData,
   getScriptStateConfig,
   hasScriptFields,
+  normalizeScriptConfig,
   showScriptEditor,
   triggerScript,
 } from "../../../data/script";
@@ -172,11 +172,15 @@ export class HaScriptEditor extends SubscribeMixin(
       >
         ${this.scriptId && !this.narrow
           ? html`
-              <mwc-button @click=${this._showTrace} slot="toolbar-icon">
+              <ha-button
+                appearance="plain"
+                @click=${this._showTrace}
+                slot="toolbar-icon"
+              >
                 ${this.hass.localize(
                   "ui.panel.config.script.editor.show_trace"
                 )}
-              </mwc-button>
+              </ha-button>
             `
           : ""}
         <ha-button-menu slot="toolbar-icon">
@@ -383,11 +387,11 @@ export class HaScriptEditor extends SubscribeMixin(
                   "ui.panel.config.script.editor.confirm_take_control"
                 )}
                 <div slot="action" style="display: flex;">
-                  <mwc-button @click=${this._takeControlSave}
+                  <ha-button appearance="plain" @click=${this._takeControlSave}
-                    >${this.hass.localize("ui.common.yes")}</mwc-button
+                    >${this.hass.localize("ui.common.yes")}</ha-button
                   >
-                  <mwc-button @click=${this._revertBlueprint}
+                  <ha-button appearance="plain" @click=${this._revertBlueprint}
-                    >${this.hass.localize("ui.common.no")}</mwc-button
+                    >${this.hass.localize("ui.common.no")}</ha-button
                   >
                 </div>
               </ha-alert>`
@@ -396,11 +400,15 @@ export class HaScriptEditor extends SubscribeMixin(
                   >${this.hass.localize(
                     "ui.panel.config.script.editor.read_only"
                   )}
-                  <mwc-button slot="action" @click=${this._duplicate}>
+                  <ha-button
+                    appearance="plain"
+                    slot="action"
+                    @click=${this._duplicate}
+                  >
                     ${this.hass.localize(
                       "ui.panel.config.script.editor.migrate"
                     )}
-                  </mwc-button>
+                  </ha-button>
                 </ha-alert>`
               : nothing}
           ${this._mode === "gui"

src/panels/config/script/ha-script-trace.ts

@@ -16,6 +16,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button-menu";
+import "../../../components/ha-button";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/trace/ha-trace-blueprint-config";
@@ -101,17 +102,16 @@ export class HaScriptTrace extends LitElement {
       <hass-subpage .hass=${this.hass} .narrow=${this.narrow} .header=${title}>
         ${!this.narrow && this.scriptId
           ? html`
-              <a
+              <ha-button
                 class="trace-link"
                 href="/config/script/edit/${this.scriptId}"
                 slot="toolbar-icon"
+                appearance="plain"
               >
-                <mwc-button>
+                ${this.hass.localize(
-                  ${this.hass.localize(
+                  "ui.panel.config.script.trace.edit_script"
-                    "ui.panel.config.script.trace.edit_script"
+                )}
-                  )}
+              </ha-button>
-                </mwc-button>
-              </a>
             `
           : ""}
 

src/panels/config/storage/dialog-mount-view.ts

@@ -271,19 +271,24 @@ class ViewMountDialog extends LitElement {
         ${this._existing
           ? html`<ha-button
               @click=${this._deleteMount}
-              destructive
+              variant="danger"
               slot="secondaryAction"
+              appearance="plain"
             >
               ${this.hass.localize("ui.common.delete")}
             </ha-button>`
           : nothing}
 
         <div slot="primaryAction">
-          <ha-button @click=${this.closeDialog} dialogInitialFocus>
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            dialogInitialFocus
+          >
             ${this.hass.localize("ui.common.cancel")}
           </ha-button>
           <ha-progress-button
-            .progress=${this._waiting}
+            .progress=${!!this._waiting}
             @click=${this._connectMount}
           >
             ${this._existing

src/panels/config/storage/dialog-move-datadisk.ts

@@ -5,6 +5,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import "../../../components/ha-dialog";
+import "../../../components/ha-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-select";
 import "../../../components/ha-spinner";
@@ -152,21 +153,22 @@ class MoveDatadiskDialog extends LitElement {
                 )}
               </ha-select>
 
-              <mwc-button
+              <ha-button
-                slot="secondaryAction"
+                slot="primaryAction"
+                appearance="plain"
                 @click=${this.closeDialog}
                 dialogInitialFocus
               >
                 ${this.hass.localize("ui.panel.config.storage.datadisk.cancel")}
-              </mwc-button>
+              </ha-button>
 
-              <mwc-button
+              <ha-button
                 .disabled=${!this._selectedDevice}
                 slot="primaryAction"
                 @click=${this._moveDatadisk}
               >
                 ${this.hass.localize("ui.panel.config.storage.datadisk.move")}
-              </mwc-button>
+              </ha-button>
             `}
       </ha-dialog>
     `;

src/panels/config/storage/ha-config-section-storage.ts

@@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { navigate } from "../../../common/navigate";
 import "../../../components/ha-alert";
+import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
@@ -123,11 +124,14 @@ class HaConfigSectionStorage extends LitElement {
                   </div>
                   ${this._hostInfo
                     ? html`<div class="card-actions">
-                        <mwc-button @click=${this._moveDatadisk}>
+                        <ha-button
+                          appearance="plain"
+                          @click=${this._moveDatadisk}
+                        >
                           ${this.hass.localize(
                             "ui.panel.config.storage.datadisk.title"
                           )}
-                        </mwc-button>
+                        </ha-button>
                       </div>`
                     : nothing}
                 </ha-card>
@@ -153,14 +157,15 @@ class HaConfigSectionStorage extends LitElement {
                           "ui.panel.config.storage.network_mounts.not_supported.os",
                           { version: "10.2" }
                         )}
-                        <mwc-button
+                        <ha-button
+                          appearance="plain"
                           slot="action"
                           @click=${this._navigateToUpdates}
                         >
                           ${this.hass.localize(
                             "ui.panel.config.storage.network_mounts.not_supported.navigate_to_updates"
                           )}
-                        </mwc-button>`
+                        </ha-button>`
                     : this.hass.localize(
                         "ui.panel.config.storage.network_mounts.not_supported.supervised"
                       )}
@@ -218,11 +223,11 @@ class HaConfigSectionStorage extends LitElement {
                   </div>`}
             ${this._mountsInfo !== null
               ? html`<div class="card-actions">
-                  <mwc-button @click=${this._addMount}>
+                  <ha-button appearance="plain" @click=${this._addMount}>
                     ${this.hass.localize(
                       "ui.panel.config.storage.network_mounts.add_title"
                     )}
-                  </mwc-button>
+                  </ha-button>
                 </div>`
               : nothing}
           </ha-card>
@@ -304,6 +309,10 @@ class HaConfigSectionStorage extends LitElement {
       max-width: 1040px;
       margin: 0 auto;
     }
+    .card-actions {
+      display: flex;
+      justify-content: flex-end;
+    }
     ha-card {
       max-width: 600px;
       margin: 0 auto 12px;

src/panels/config/users/dialog-admin-change-password.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -8,6 +7,7 @@ import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../components/ha-form/types";
 import "../../../components/ha-textfield";
+import "../../../components/ha-button";
 import { adminChangePassword } from "../../../data/auth";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -121,9 +121,9 @@ class DialogAdminChangePassword extends LitElement {
                   "ui.panel.config.users.change_password.password_changed"
                 )}
               </p>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.ok")}
-              </mwc-button>
+              </ha-button>
             `
           : html`
               <ha-form
@@ -136,10 +136,14 @@ class DialogAdminChangePassword extends LitElement {
                 @value-changed=${this._valueChanged}
                 .disabled=${this._submitting}
               ></ha-form>
-              <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+              <ha-button
+                appearance="plain"
+                slot="primaryAction"
+                @click=${this.closeDialog}
+              >
                 ${this.hass.localize("ui.common.cancel")}
-              </mwc-button>
+              </ha-button>
-              <mwc-button
+              <ha-button
                 slot="primaryAction"
                 @click=${this._changePassword}
                 .disabled=${this._submitting || !canSubmit}
@@ -147,7 +151,7 @@ class DialogAdminChangePassword extends LitElement {
                 ${this.hass.localize(
                   "ui.panel.config.users.change_password.change"
                 )}
-              </mwc-button>
+              </ha-button>
             `}
       </ha-dialog>
     `;

src/panels/config/voice-assistants/cloud-alexa-pref.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiHelpCircle } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
@@ -7,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
+import "../../../components/ha-button";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
@@ -180,24 +180,23 @@ export class CloudAlexaPref extends LitElement {
         </div>
         ${alexa_enabled
           ? html`<div class="card-actions">
-              <a
+              <ha-button
+                appearance="plain"
                 href="/config/voice-assistants/expose?assistants=cloud.alexa&historyBack"
               >
-                <mwc-button>
+                ${manualConfig
-                  ${manualConfig
+                  ? this.hass!.localize(
-                    ? this.hass!.localize(
+                      "ui.panel.config.cloud.account.alexa.show_entities"
-                        "ui.panel.config.cloud.account.alexa.show_entities"
+                    )
-                      )
+                  : this.hass.localize(
-                    : this.hass.localize(
+                      "ui.panel.config.cloud.account.alexa.exposed_entities",
-                        "ui.panel.config.cloud.account.alexa.exposed_entities",
+                      {
-                        {
+                        number: this.exposedEntities
-                          number: this.exposedEntities
+                          ? this._exposedEntitiesCount(this.exposedEntities)
-                            ? this._exposedEntitiesCount(this.exposedEntities)
+                          : 0,
-                            : 0,
+                      }
-                        }
+                    )}
-                      )}
+              </ha-button>
-                </mwc-button>
-              </a>
             </div>`
           : nothing}
       </ha-card>

src/panels/config/voice-assistants/cloud-google-pref.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiHelpCircle } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
@@ -7,6 +6,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { isEmptyEntityDomainFilter } from "../../../common/entity/entity_domain_filter";
 import "../../../components/ha-alert";
 import "../../../components/ha-card";
+import "../../../components/ha-button";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
@@ -237,24 +237,24 @@ export class CloudGooglePref extends LitElement {
         </div>
         ${google_enabled
           ? html`<div class="card-actions">
-              <a
+              <ha-button
+                appearance="plain"
+                size="small"
                 href="/config/voice-assistants/expose?assistants=cloud.google_assistant&historyBack"
               >
-                <mwc-button>
+                ${manualConfig
-                  ${manualConfig
+                  ? this.hass!.localize(
-                    ? this.hass!.localize(
+                      "ui.panel.config.cloud.account.google.show_entities"
-                        "ui.panel.config.cloud.account.google.show_entities"
+                    )
-                      )
+                  : this.hass.localize(
-                    : this.hass.localize(
+                      "ui.panel.config.cloud.account.google.exposed_entities",
-                        "ui.panel.config.cloud.account.google.exposed_entities",
+                      {
-                        {
+                        number: this.exposedEntities
-                          number: this.exposedEntities
+                          ? this._exposedEntitiesCount(this.exposedEntities)
-                            ? this._exposedEntitiesCount(this.exposedEntities)
+                          : 0,
-                            : 0,
+                      }
-                        }
+                    )}
-                      )}
+              </ha-button>
-                </mwc-button>
-              </a>
             </div>`
           : nothing}
       </ha-card>

src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts

@@ -27,6 +27,7 @@ import type {
   SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-fab";
+import "../../../components/ha-button";
 import "../../../components/ha-tooltip";
 import type { AlexaEntity } from "../../../data/alexa";
 import { fetchCloudAlexaEntities } from "../../../data/alexa";
@@ -588,15 +589,21 @@ export class VoiceAssistantsExpose extends LitElement {
               <div class="header-btns" slot="selection-bar">
                 ${!this.narrow
                   ? html`
-                      <mwc-button @click=${this._exposeSelected}
+                      <ha-button
+                        appearance="plain"
+                        size="small"
+                        @click=${this._exposeSelected}
                         >${this.hass.localize(
                           "ui.panel.config.voice_assistants.expose.expose"
-                        )}</mwc-button
+                        )}</ha-button
                       >
-                      <mwc-button @click=${this._unexposeSelected}
+                      <ha-button
+                        appearance="plain"
+                        size="small"
+                        @click=${this._unexposeSelected}
                         >${this.hass.localize(
                           "ui.panel.config.voice_assistants.expose.unexpose"
-                        )}</mwc-button
+                        )}</ha-button
                       >
                     `
                   : html`
@@ -831,7 +838,7 @@ export class VoiceAssistantsExpose extends LitElement {
         .header-btns {
           display: flex;
         }
-        .header-btns > mwc-button,
+        .header-btns > ha-button,
         .header-btns > ha-icon-button {
           margin: 8px;
         }

src/panels/developer-tools/statistics/developer-tools-statistics.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import {
   mdiArrowDown,
   mdiArrowUp,
@@ -22,6 +21,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/chips/ha-assist-chip";
 import "../../../components/ha-md-divider";
+import "../../../components/ha-button";
 import "../../../components/data-table/ha-data-table";
 import type {
   DataTableColumnContainer,
@@ -203,9 +203,11 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
         ),
         template: (statistic) =>
           html`${statistic.issues
-            ? html`<mwc-button
+            ? html`<ha-button
                 @click=${this._fixIssue}
                 .data=${statistic.issues}
+                appearance="plain"
+                size="small"
               >
                 ${localize(
                   statistic.issues.some((issue) =>
@@ -214,7 +216,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
                     ? "ui.panel.developer-tools.tabs.statistics.fix_issue.fix"
                     : "ui.panel.developer-tools.tabs.statistics.fix_issue.info"
                 )}
-              </mwc-button>`
+              </ha-button>`
             : "—"}`,
         minWidth: "113px",
         maxWidth: "113px",

src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { formatISO9075 } from "date-fns";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -8,6 +7,7 @@ import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-spinner";
 import "../../../components/ha-dialog";
+import "../../../components/ha-button";
 import "../../../components/ha-form/ha-form";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-list-item";
@@ -193,18 +193,18 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
         @value-changed=${this._dateTimeSelectorChanged}
       ></ha-selector-datetime>
       <div class="stat-list">${stats}</div>
-      <mwc-button
+      <ha-button
+        appearance="plain"
         slot="secondaryAction"
-        .label=${this.hass.localize(
+        @click=${this._fetchOutliers}
+      >
+        ${this.hass.localize(
           "ui.panel.developer-tools.tabs.statistics.fix_issue.adjust_sum.outliers"
         )}
-        @click=${this._fetchOutliers}
+      </ha-button>
-      ></mwc-button>
+      <ha-button slot="primaryAction" dialogAction="cancel">
-      <mwc-button
+        ${this.hass.localize("ui.common.close")}
-        slot="primaryAction"
+      </ha-button>
-        dialogAction="cancel"
-        .label=${this.hass.localize("ui.common.close")}
-      ></mwc-button>
     `;
   }
 
@@ -283,20 +283,22 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
         @value-changed=${this._amountChanged}
       ></ha-selector-number>
 
-      <mwc-button
+      <ha-button
-        slot="primaryAction"
-        .label=${this.hass.localize(
-          "ui.panel.developer-tools.tabs.statistics.fix_issue.adjust_sum.adjust"
-        )}
-        .disabled=${this._busy}
-        @click=${this._fixIssue}
-      ></mwc-button>
-      <mwc-button
         slot="secondaryAction"
-        .label=${this.hass.localize("ui.common.back")}
         .disabled=${this._busy}
         @click=${this._clearChosenStatistic}
-      ></mwc-button>
+      >
+        ${this.hass.localize("ui.common.back")}</ha-button
+      >
+      <ha-button
+        slot="primaryAction"
+        .disabled=${this._busy}
+        @click=${this._fixIssue}
+      >
+        ${this.hass.localize(
+          "ui.panel.developer-tools.tabs.statistics.fix_issue.adjust_sum.adjust"
+        )}</ha-button
+      >
     `;
   }
 

src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import {
   mdiArrowDown,
   mdiArrowLeft,
@@ -18,6 +17,7 @@ import { css, html, LitElement, svg, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import "../../../../components/ha-card";
+import "../../../../components/ha-button";
 import "../../../../components/ha-svg-icon";
 import type { EnergyData } from "../../../../data/energy";
 import {
@@ -756,13 +756,11 @@ class HuiEnergyDistrubutionCard
         ${this._config.link_dashboard
           ? html`
               <div class="card-actions">
-                <a href="/energy"
+                <ha-button appearance="plain" size="small" href="/energy">
-                  ><mwc-button>
+                  ${this.hass.localize(
-                    ${this.hass.localize(
+                    "ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard"
-                      "ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard"
+                  )}
-                    )}
+                </ha-button>
-                  </mwc-button></a
-                >
               </div>
             `
           : ""}

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -10,6 +10,7 @@ import { stateColorCss } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/chips/ha-assist-chip";
 import "../../../components/ha-card";
+import "../../../components/ha-button";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-textfield";
 import type { HaTextField } from "../../../components/ha-textfield";
@@ -258,13 +259,15 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
             : (["disarm"] as const)
           ).map(
             (stateAction) => html`
-              <mwc-button
+              <ha-button
                 .action=${stateAction}
                 @click=${this._handleActionClick}
-                outlined
+                appearance="filled"
+                size="small"
+                variant=${stateAction === "disarm" ? "danger" : "primary"}
               >
                 ${this._actionDisplay(stateAction)}
-              </mwc-button>
+              </ha-button>
             `
           )}
         </div>
@@ -286,12 +289,12 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
               <div id="keypad">
                 ${BUTTONS.map((value) =>
                   value === ""
-                    ? html` <mwc-button disabled></mwc-button> `
+                    ? html`<ha-button disabled></ha-button> `
                     : html`
-                        <mwc-button
+                        <ha-button
                           .value=${value}
                           @click=${this._handlePadClick}
-                          outlined
+                          appearance="filled"
                           class=${classMap({
                             numberkey: value !== "clear",
                           })}
@@ -301,7 +304,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
                                 `ui.card.alarm_control_panel.clear_code`
                               )
                             : value}
-                        </mwc-button>
+                        </ha-button>
                       `
                 )}
               </div>
@@ -418,7 +421,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       direction: ltr;
     }
 
-    #keypad mwc-button {
+    #keypad ha-button {
       padding: 8px;
       width: 30%;
       box-sizing: border-box;
@@ -431,19 +434,12 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       justify-content: center;
     }
 
-    .actions mwc-button {
+    .actions ha-button {
       margin: 0 4px 4px;
     }
 
-    mwc-button#disarm {
+    ha-button.numberkey {
-      color: var(--error-color);
+      --ha-button-font-size: var(--keypad-font-size, var(--ha-font-size-s));
-    }
-
-    mwc-button.numberkey {
-      --mdc-typography-button-font-size: var(
-        --keypad-font-size,
-        var(--ha-font-size-s)
-      );
     }
   `;
 }

src/panels/lovelace/cards/hui-empty-state-card.ts

@@ -1,7 +1,7 @@
-import "@material/mwc-button/mwc-button";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-card";
+import "../../../components/ha-button";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCard } from "../types";
 import type { EmptyStateCardConfig } from "./types";
@@ -34,13 +34,11 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
           )}
         </div>
         <div class="card-actions">
-          <a href="/config/integrations/dashboard">
+          <ha-button appearance="plain" href="/config/integrations/dashboard">
-            <mwc-button>
+            ${this.hass.localize(
-              ${this.hass.localize(
+              "ui.panel.lovelace.cards.empty_state.go_to_integrations_page"
-                "ui.panel.lovelace.cards.empty_state.go_to_integrations_page"
+            )}
-              )}
+          </ha-button>
-            </mwc-button>
-          </a>
         </div>
       </ha-card>
     `;
@@ -56,7 +54,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
       text-decoration: none;
     }
 
-    mwc-button {
+    ha-button {
       margin-left: -8px;
       margin-inline-start: -8px;
       margin-inline-end: initial;

src/panels/lovelace/components/hui-card-options.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import {
   mdiContentCopy,
@@ -17,6 +16,7 @@ import { storage } from "../../../common/decorators/storage";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-button";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
@@ -95,10 +95,10 @@ export class HuiCardOptions extends LitElement {
       <div class="card"><slot></slot></div>
       <ha-card>
         <div class="card-actions">
-          <mwc-button @click=${this._editCard}
+          <ha-button appearance="plain" @click=${this._editCard}
             >${this.hass!.localize(
               "ui.panel.lovelace.editor.edit_card.edit"
-            )}</mwc-button
+            )}</ha-button
           >
           <div class="right">
             <slot name="buttons"></slot>

src/panels/lovelace/editor/badge-editor/hui-dialog-create-badge.ts

@@ -6,6 +6,7 @@ import { cache } from "lit/directives/cache";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-dialog";
+import "../../../../components/ha-button";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/sl-tab-group";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -139,14 +140,14 @@ export class HuiCreateDialogBadge
         )}
 
         <div slot="primaryAction">
-          <mwc-button @click=${this._cancel}>
+          <ha-button appearance="plain" @click=${this._cancel}>
             ${this.hass!.localize("ui.common.cancel")}
-          </mwc-button>
+          </ha-button>
           ${this._selectedEntities.length
             ? html`
-                <mwc-button @click=${this._suggestBadges}>
+                <ha-button @click=${this._suggestBadges}>
                   ${this.hass!.localize("ui.common.continue")}
-                </mwc-button>
+                </ha-button>
               `
             : ""}
         </div>

src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts

@@ -6,10 +6,11 @@ import { customElement, property, query, state } from "lit/decorators";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import "../../../../components/ha-spinner";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-spinner";
+import "../../../../components/ha-button";
 import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
 import { ensureBadgeConfig } from "../../../../data/lovelace/config/badge";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -255,7 +256,8 @@ export class HuiDialogEditBadge
         </div>
         ${this._badgeConfig !== undefined
           ? html`
-              <mwc-button
+              <ha-button
+                appearance="plain"
                 slot="secondaryAction"
                 @click=${this._toggleMode}
                 .disabled=${!this._guiModeAvailable}
@@ -266,31 +268,29 @@ export class HuiDialogEditBadge
                     ? "ui.panel.lovelace.editor.edit_badge.show_code_editor"
                     : "ui.panel.lovelace.editor.edit_badge.show_visual_editor"
                 )}
-              </mwc-button>
+              </ha-button>
             `
-          : ""}
+          : nothing}
-        <div slot="primaryAction" @click=${this._save}>
+        <ha-button
-          <mwc-button @click=${this._cancel} dialogInitialFocus>
+          appearance="plain"
-            ${this.hass!.localize("ui.common.cancel")}
+          slot="primaryAction"
-          </mwc-button>
+          @click=${this._cancel}
-          ${this._badgeConfig !== undefined && this._dirty
+          dialogInitialFocus
-            ? html`
+        >
-                <mwc-button
+          ${this.hass!.localize("ui.common.cancel")}
-                  ?disabled=${!this._canSave || this._saving}
+        </ha-button>
-                  @click=${this._save}
+        ${this._badgeConfig !== undefined && this._dirty
-                >
+          ? html`
-                  ${this._saving
+              <ha-button
-                    ? html`
+                slot="primaryAction"
-                        <ha-spinner
+                ?disabled=${!this._canSave || this._saving}
-                          aria-label="Saving"
+                @click=${this._save}
-                          size="small"
+                .loading=${this._saving}
-                        ></ha-spinner>
+              >
-                      `
+                ${this.hass!.localize("ui.common.save")}
-                    : this.hass!.localize("ui.common.save")}
+              </ha-button>
-                </mwc-button>
+            `
-              `
+          : nothing}
-            : ``}
-        </div>
       </ha-dialog>
     `;
   }

src/panels/lovelace/editor/badge-editor/hui-dialog-suggest-badge.ts

@@ -4,7 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-yaml-editor";
-import "../../../../components/ha-spinner";
+import "../../../../components/ha-button";
 
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
@@ -92,30 +92,27 @@ export class HuiDialogSuggestBadge extends LitElement {
               `
             : nothing}
         </div>
-        <mwc-button
+        <ha-button
-          slot="secondaryAction"
+          appearance="plain"
+          slot="primaryAction"
           @click=${this.closeDialog}
           dialogInitialFocus
         >
           ${this._params.yaml
             ? this.hass!.localize("ui.common.close")
             : this.hass!.localize("ui.common.cancel")}
-        </mwc-button>
+        </ha-button>
         ${!this._params.yaml
           ? html`
-              <mwc-button
+              <ha-button
                 slot="primaryAction"
-                .disabled=${this._saving}
                 @click=${this._save}
+                .loading=${this._saving}
               >
-                ${this._saving
+                ${this.hass!.localize(
-                  ? html`
+                  "ui.panel.lovelace.editor.suggest_badge.add"
-                      <ha-spinner aria-label="Saving" size="small"></ha-spinner>
+                )}
-                    `
+              </ha-button>
-                  : this.hass!.localize(
-                      "ui.panel.lovelace.editor.suggest_badge.add"
-                    )}
-              </mwc-button>
             `
           : nothing}
       </ha-dialog>

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -1,10 +1,9 @@
-import "@material/mwc-button";
 import { mdiClose, mdiHelpCircle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-spinner";
+import "../../../components/ha-button";
 import "../../../components/ha-dialog";
 import "../../../components/ha-dialog-header";
 import "../../../components/ha-formfield";
@@ -133,30 +132,28 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
         </div>
         ${this._params.mode === "storage"
           ? html`
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button
-                ${this.hass!.localize("ui.common.cancel")}
+                appearance="plain"
-              </mwc-button>
-              <mwc-button
                 slot="primaryAction"
-                ?disabled=${this._saving}
+                @click=${this.closeDialog}
-                @click=${this._saveConfig}
+              >
+                ${this.hass!.localize("ui.common.cancel")}
+              </ha-button>
+              <ha-button
+                slot="primaryAction"
+                @click=${this._saveConfig}
+                .loading=${this._saving}
               >
-                ${this._saving
-                  ? html`<ha-spinner
-                      size="small"
-                      aria-label="Saving"
-                    ></ha-spinner>`
-                  : ""}
                 ${this.hass!.localize(
                   "ui.panel.lovelace.editor.save_config.save"
                 )}
-              </mwc-button>
+              </ha-button>
             `
           : html`
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass!.localize(
                   "ui.panel.lovelace.editor.save_config.close"
-                )}</mwc-button
+                )}</ha-button
               >
             `}
       </ha-dialog>

src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts

@@ -1,11 +1,10 @@
-import "@material/mwc-button/mwc-button";
-
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-button";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-icon";
 import "../../../../components/ha-list";
@@ -140,20 +139,21 @@ export class HuiDialogSelectView extends LitElement {
                 </ha-list>
               `
             : ""}
-        <mwc-button
+        <ha-button
-          slot="secondaryAction"
+          slot="primaryAction"
           @click=${this.closeDialog}
           dialogInitialFocus
+          appearance="plain"
         >
           ${this.hass!.localize("ui.common.cancel")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button
+        <ha-button
           slot="primaryAction"
           .disabled=${!this._config || (this._config.views || []).length < 1}
           @click=${this._selectView}
         >
           ${this._params.actionLabel || this.hass!.localize("ui.common.move")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/lovelace/entity-rows/hui-button-entity-row.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -6,6 +5,7 @@ import { UNAVAILABLE } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
+import "../../../components/ha-button";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { ActionRowConfig, LovelaceRow } from "./types";
 import { confirmAction } from "../common/confirm-action";
@@ -44,18 +44,20 @@ class HuiButtonEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <mwc-button
+        <ha-button
+          appearance="plain"
+          size="small"
           @click=${this._pressButton}
           .disabled=${stateObj.state === UNAVAILABLE}
         >
           ${this.hass.localize("ui.card.button.press")}
-        </mwc-button>
+        </ha-button>
       </hui-generic-entity-row>
     `;
   }
 
   static styles = css`
-    mwc-button:last-child {
+    ha-button:last-child {
       margin-right: -0.57em;
       margin-inline-end: -0.57em;
       margin-inline-start: initial;

src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts

@@ -1,14 +1,14 @@
-import "@material/mwc-button/mwc-button";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { UNAVAILABLE } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
+import { confirmAction } from "../common/confirm-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import "../../../components/ha-button";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { ActionRowConfig, LovelaceRow } from "./types";
-import { confirmAction } from "../common/confirm-action";
 
 @customElement("hui-input-button-entity-row")
 class HuiInputButtonEntityRow extends LitElement implements LovelaceRow {
@@ -44,18 +44,20 @@ class HuiInputButtonEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <mwc-button
+        <ha-button
+          appearance="plain"
+          size="small"
           @click=${this._pressButton}
           .disabled=${stateObj.state === UNAVAILABLE}
         >
           ${this.hass.localize("ui.card.button.press")}
-        </mwc-button>
+        </ha-button>
       </hui-generic-entity-row>
     `;
   }
 
   static styles = css`
-    mwc-button:last-child {
+    ha-button:last-child {
       margin-right: -0.57em;
       margin-inline-end: -0.57em;
       margin-inline-start: initial;

src/panels/lovelace/ha-panel-lovelace.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import deepFreeze from "deep-freeze";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
@@ -35,6 +34,7 @@ import { checkLovelaceConfig } from "./common/check-lovelace-config";
 import { loadLovelaceResources } from "./common/load-resources";
 import { showSaveDialog } from "./editor/show-save-config-dialog";
 import "./hui-root";
+import "../../components/ha-button";
 import { generateLovelaceDashboardStrategy } from "./strategies/get-strategy";
 import type { Lovelace } from "./types";
 
@@ -147,9 +147,9 @@ export class LovelacePanel extends LitElement {
           title=${domainToName(this.hass!.localize, "lovelace")}
           .error=${this._errorMsg}
         >
-          <mwc-button raised @click=${this._forceFetchConfig}>
+          <ha-button @click=${this._forceFetchConfig}>
             ${this.hass!.localize("ui.panel.lovelace.reload_lovelace")}
-          </mwc-button>
+          </ha-button>
         </hass-error-screen>
       `;
     }

src/panels/lovelace/hui-editor.ts

@@ -1,5 +1,4 @@
 import { undoDepth } from "@codemirror/commands";
-import "@material/mwc-button";
 import { mdiClose } from "@mdi/js";
 import { dump, load } from "js-yaml";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -11,6 +10,7 @@ import { deepEqual } from "../../common/util/deep-equal";
 import "../../components/ha-code-editor";
 import type { HaCodeEditor } from "../../components/ha-code-editor";
 import "../../components/ha-icon-button";
+import "../../components/ha-button";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -71,14 +71,13 @@ class LovelaceFullConfigEditor extends LitElement {
               )
             : this.hass!.localize("ui.panel.lovelace.editor.raw_editor.saved")}
         </div>
-        <mwc-button
+        <ha-button
-          raised
           slot="actionItems"
           @click=${this._handleSave}
           .disabled=${!this._changed}
           >${this.hass!.localize(
             "ui.panel.lovelace.editor.raw_editor.save"
-          )}</mwc-button
+          )}</ha-button
         >
         <div class="content">
           <ha-code-editor
@@ -142,11 +141,6 @@ class LovelaceFullConfigEditor extends LitElement {
           --app-header-text-color: var(--app-header-edit-text-color, #fff);
         }
 
-        mwc-button[disabled] {
-          background-color: var(--mdc-theme-on-primary);
-          border-radius: 4px;
-        }
-
         .content {
           height: calc(100vh - var(--header-height));
         }

src/panels/profile/dialog-ha-mfa-module-setup-flow.ts

@@ -1,11 +1,11 @@
-import "@material/mwc-button";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../components/ha-spinner";
+import "../../components/ha-button";
 import "../../components/ha-dialog";
 import "../../components/ha-form/ha-form";
 import "../../components/ha-markdown";
+import "../../components/ha-spinner";
 import { autocompleteLoginFields } from "../../data/auth";
 import type {
   DataEntryFlowStep,
@@ -127,23 +127,30 @@ class HaMfaModuleSetupFlow extends LitElement {
                         ></ha-form>`
                     : ""}`}
         </div>
-        ${["abort", "create_entry"].includes(this._step?.type || "")
+        <ha-button
-          ? html`<mwc-button slot="primaryAction" @click=${this.closeDialog}
+          slot="primaryAction"
-              >${this.hass.localize(
+          @click=${this.closeDialog}
-                "ui.panel.profile.mfa_setup.close"
+          appearance=${["abort", "create_entry"].includes(
-              )}</mwc-button
+            this._step?.type || ""
-            >`
+          )
-          : ""}
+            ? "accent"
+            : "plain"}
+          >${this.hass.localize(
+            ["abort", "create_entry"].includes(this._step?.type || "")
+              ? "ui.panel.profile.mfa_setup.close"
+              : "ui.common.cancel"
+          )}</ha-button
+        >
         ${this._step?.type === "form"
-          ? html`<mwc-button
+          ? html`<ha-button
               slot="primaryAction"
               .disabled=${this._loading}
               @click=${this._submitStep}
               >${this.hass.localize(
                 "ui.panel.profile.mfa_setup.submit"
-              )}</mwc-button
+              )}</ha-button
             >`
-          : ""}
+          : nothing}
       </ha-dialog>
     `;
   }

src/panels/profile/ha-change-password-card.ts

@@ -1,8 +1,8 @@
-import "@material/mwc-button";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-card";
+import "../../components/ha-button";
 import "../../components/ha-spinner";
 import "../../components/ha-textfield";
 import "../../components/ha-password-field";
@@ -89,17 +89,14 @@ class HaChangePasswordCard extends LitElement {
         </div>
 
         <div class="card-actions">
-          ${this._loading
+          <ha-button
-            ? html`<div>
+            .loading=${this._loading}
-                <ha-spinner></ha-spinner>
+            @click=${this._changePassword}
-              </div>`
+            .disabled=${!this._passwordConfirm}
-            : html`<mwc-button
+            >${this.hass.localize(
-                @click=${this._changePassword}
+              "ui.panel.profile.change_password.submit"
-                .disabled=${!this._passwordConfirm}
+            )}</ha-button
-                >${this.hass.localize(
+          >
-                  "ui.panel.profile.change_password.submit"
-                )}</mwc-button
-              >`}
         </div>
       </ha-card>
     `;
@@ -205,6 +202,10 @@ class HaChangePasswordCard extends LitElement {
         #currentPassword {
           margin-top: 0;
         }
+        .card-actions {
+          display: flex;
+          justify-content: flex-end;
+        }
       `,
     ];
   }

src/panels/profile/ha-long-lived-access-tokens-card.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiDelete } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
@@ -6,9 +5,10 @@ import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { relativeTime } from "../../common/datetime/relative_time";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-button";
 import "../../components/ha-card";
-import "../../components/ha-settings-row";
 import "../../components/ha-icon-button";
+import "../../components/ha-settings-row";
 import type { RefreshToken } from "../../data/refresh_token";
 import {
   showAlertDialog,
@@ -88,11 +88,11 @@ class HaLongLivedTokens extends LitElement {
         </div>
 
         <div class="card-actions">
-          <mwc-button @click=${this._createToken}>
+          <ha-button @click=${this._createToken}>
             ${this.hass.localize(
               "ui.panel.profile.long_lived_access_tokens.create"
             )}
-          </mwc-button>
+          </ha-button>
         </div>
       </ha-card>
     `;
@@ -175,12 +175,13 @@ class HaLongLivedTokens extends LitElement {
         a {
           color: var(--primary-color);
         }
-        mwc-button {
-          --mdc-theme-primary: var(--primary-color);
-        }
         ha-icon-button {
           color: var(--primary-text-color);
         }
+        .card-actions {
+          display: flex;
+          justify-content: flex-end;
+        }
       `,
     ];
   }

src/panels/profile/ha-mfa-modules-card.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-card";
+import "../../components/ha-button";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant, MFAModule } from "../../types";
 import { showMfaModuleSetupFlowDialog } from "./show-ha-mfa-module-setup-flow-dialog";
@@ -22,17 +22,15 @@ class HaMfaModulesCard extends LitElement {
             html`<ha-settings-row two-line>
               <span slot="heading">${module.name}</span>
               <span slot="description">${module.id}</span>
-              ${module.enabled
+              <ha-button
-                ? html`<mwc-button .module=${module} @click=${this._disable}
+                size="small"
-                    >${this.hass.localize(
+                appearance="plain"
-                      "ui.panel.profile.mfa.disable"
+                .module=${module}
-                    )}</mwc-button
+                @click=${module.enabled ? this._disable : this._enable}
-                  >`
+                >${this.hass.localize(
-                : html`<mwc-button .module=${module} @click=${this._enable}
+                  `ui.panel.profile.mfa.${module.enabled ? "disable" : "enable"}`
-                    >${this.hass.localize(
+                )}</ha-button
-                      "ui.panel.profile.mfa.enable"
+              >
-                    )}</mwc-button
-                  >`}
             </ha-settings-row>`
         )}
       </ha-card>
@@ -40,7 +38,7 @@ class HaMfaModulesCard extends LitElement {
   }
 
   static styles = css`
-    mwc-button {
+    ha-button {
       margin-right: -0.57em;
       margin-inline-end: -0.57em;
       margin-inline-start: initial;