Migrate to ha-button

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

@@ -1,5 +1,4 @@
 /* eslint-disable lit/no-template-arrow */
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";

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

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";

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

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";

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

@@ -1,5 +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";

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

@@ -135,9 +135,6 @@ export class HaProgressButton extends LitElement {
     ha-button.error slot {
       visibility: hidden;
     }
-    :host([destructive]) {
-      --mdc-theme-primary: var(--error-color);
-    }
   `;
 }
 

src/components/data-table/ha-data-table.ts

@@ -904,7 +904,7 @@ export class HaDataTable extends LitElement {
         .find((el) =>
           [
             "ha-checkbox",
-            "mwc-button",
+            "ha-button",
             "ha-button",
             "ha-icon-button",
             "ha-assist-chip",

src/components/ha-alert.ts

@@ -131,7 +131,6 @@ class HaAlert extends LitElement {
       margin-top: 2px;
       font-weight: var(--ha-font-weight-bold);
     }
-    .action mwc-button,
     .action ha-icon-button {
       --mdc-theme-primary: var(--primary-text-color);
       --mdc-icon-button-size: 36px;

src/components/ha-button-menu.ts

@@ -6,6 +6,7 @@ import { customElement, property, query } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
 import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
 import type { HaIconButton } from "./ha-icon-button";
+import type { HaButton } from "./ha-button";
 import "./ha-menu";
 
 @customElement("ha-button-menu")
@@ -94,7 +95,7 @@ export class HaButtonMenu extends LitElement {
   private get _triggerButton() {
     return this.querySelector(
       'ha-icon-button[slot="trigger"], ha-button[slot="trigger"], mwc-button[slot="trigger"]'
-    ) as HaIconButton | Button | null;
+    ) as HaIconButton | Button | HaButton | null;
   }
 
   private _setTriggerAria() {

src/components/ha-button.ts

@@ -83,7 +83,6 @@ export class HaButton extends Button {
         --sl-input-border-width: var(--ha-button-border-width, 0);
       }
 
-      :host([destructive]), /* Deprecated */
       :host([variant="danger"]) {
         --ha-button-theme-color: #b30532;
         --ha-button-theme-darker-color: #64031d;

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

@@ -1,5 +1,3 @@
-import "@material/mwc-button/mwc-button";
-
 import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 
 import { mdiCalendar } from "@mdi/js";

src/components/ha-md-button-menu.ts

@@ -4,6 +4,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
+import type { HaButton } from "./ha-button";
 import type { HaIconButton } from "./ha-icon-button";
 import "./ha-md-menu";
 import type { HaMdMenu } from "./ha-md-menu";
@@ -72,7 +73,7 @@ export class HaMdButtonMenu extends LitElement {
   private get _triggerButton() {
     return this.querySelector(
       'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"], ha-assist-chip[slot="trigger"]'
-    ) as HaIconButton | Button | null;
+    ) as HaIconButton | Button | HaButton | null;
   }
 
   private _setTriggerAria() {

src/components/ha-selector/ha-selector-media.ts

@@ -213,9 +213,6 @@ export class HaMediaSelector extends LitElement {
       display: block;
       margin-bottom: 16px;
     }
-    mwc-button {
-      margin-top: 8px;
-    }
     ha-alert {
       display: block;
       margin-bottom: 16px;

src/components/ha-target-picker.ts

@@ -1,6 +1,5 @@
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import "@material/mwc-button/mwc-button";
 import "@material/mwc-menu/mwc-menu-surface";
 import {
   mdiClose,

src/components/ha-vacuum-state.ts

@@ -1,10 +1,10 @@
-import "@material/mwc-button";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
+import "./ha-button";
 
 const STATES_INTERCEPTABLE: Record<
   string,
@@ -56,9 +56,14 @@ export class HaVacuumState extends LitElement {
       this.stateObj.attributes.supported_features
     );
     return html`
-      <mwc-button @click=${this._callService} .disabled=${!interceptable}>
+      <ha-button
+        appearance="plain"
+        size="small"
+        @click=${this._callService}
+        .disabled=${!interceptable}
+      >
         ${this._computeLabel(this.stateObj.state, interceptable)}
-      </mwc-button>
+      </ha-button>
     `;
   }
 
@@ -92,17 +97,13 @@ export class HaVacuumState extends LitElement {
     return [
       haStyle,
       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/components/media-player/ha-browse-media-tts.ts

@@ -1,10 +1,11 @@
-import "@material/mwc-button/mwc-button";
+import { mdiContentCopy } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { mdiContentCopy } from "@mdi/js";
 import { storage } from "../../common/decorators/storage";
 import { fireEvent } from "../../common/dom/fire_event";
+import { copyToClipboard } from "../../common/util/copy-clipboard";
+import { fetchCloudStatus } from "../../data/cloud";
 import type {
   MediaPlayerBrowseAction,
   MediaPlayerItem,
@@ -13,13 +14,12 @@ import type { TTSEngine } from "../../data/tts";
 import { getProviderFromTTSMediaSource, getTTSEngine } from "../../data/tts";
 import { buttonLinkStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import "../ha-textarea";
-import "../ha-language-picker";
-import "../ha-tts-voice-picker";
-import "../ha-card";
-import { fetchCloudStatus } from "../../data/cloud";
-import { copyToClipboard } from "../../common/util/copy-clipboard";
 import { showToast } from "../../util/toast";
+import "../ha-button";
+import "../ha-card";
+import "../ha-language-picker";
+import "../ha-textarea";
+import "../ha-tts-voice-picker";
 
 export interface TtsMediaPickedEvent {
   item: MediaPlayerItem;
@@ -92,11 +92,11 @@ class BrowseMediaTTS extends LitElement {
             : nothing}
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._ttsClicked}>
+          <ha-button appearance="plain" @click=${this._ttsClicked}>
             ${this.hass.localize(
               `ui.components.media-browser.tts.action_${this.action}`
             )}
-          </mwc-button>
+          </ha-button>
         </div>
       </ha-card>
       ${this._voice

src/components/media-player/ha-media-manage-button.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiFolderEdit } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -10,6 +9,7 @@ import {
 } from "../../data/media_source";
 import type { HomeAssistant } from "../../types";
 import "../ha-svg-icon";
+import "../ha-button";
 import { showMediaManageDialog } from "./show-media-manage-dialog";
 
 declare global {
@@ -38,14 +38,12 @@ class MediaManageButton extends LitElement {
       return nothing;
     }
     return html`
-      <mwc-button
+      <ha-button appearance="plain" size="small" @click=${this._manage}>
-        .label=${this.hass.localize(
+        <ha-svg-icon .path=${mdiFolderEdit} slot="prefix"></ha-svg-icon>
+        ${this.hass.localize(
           "ui.components.media-browser.file_management.manage"
         )}
-        @click=${this._manage}
+      </ha-button>
-      >
-        <ha-svg-icon .path=${mdiFolderEdit} slot="icon"></ha-svg-icon>
-      </mwc-button>
     `;
   }
 
@@ -57,11 +55,6 @@ class MediaManageButton extends LitElement {
   }
 
   static styles = css`
-    mwc-button {
-      /* We use icon + text to show disabled state */
-      --mdc-button-disabled-ink-color: --mdc-theme-primary;
-    }
-
     ha-svg-icon[slot="icon"] {
       vertical-align: middle;
     }

src/components/media-player/ha-media-player-browse.ts

@@ -1,6 +1,5 @@
 import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import { grid } from "@lit-labs/virtualizer/layouts/grid";
-import "@material/mwc-button/mwc-button";
 
 import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -42,6 +41,7 @@ import {
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-alert";
+import "../ha-button";
 import "../ha-button-menu";
 import "../ha-card";
 import "../ha-spinner";
@@ -402,8 +402,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                             ${currentItem.can_play &&
                             (!currentItem.thumbnail || !this.narrow)
                               ? html`
-                                  <mwc-button
+                                  <ha-button
-                                    raised
                                     .item=${currentItem}
                                     @click=${this._actionClicked}
                                   >
@@ -414,11 +413,12 @@ export class HaMediaPlayerBrowse extends LitElement {
                                       .path=${this.action === "play"
                                         ? mdiPlay
                                         : mdiPlus}
+                                      slot="prefix"
                                     ></ha-svg-icon>
                                     ${this.hass.localize(
                                       `ui.components.media-browser.${this.action}`
                                     )}
-                                  </mwc-button>
+                                  </ha-button>
                                 `
                               : ""}
                           </div>
@@ -952,9 +952,8 @@ export class HaMediaPlayerBrowse extends LitElement {
           min-width: 0;
           flex: 1;
         }
-        .header-info mwc-button {
+        .header-info ha-button {
           display: block;
-          --mdc-theme-primary: var(--primary-color);
           padding-bottom: 16px;
         }
         .breadcrumb {
@@ -1246,7 +1245,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           bottom: -20px;
           right: 20px;
         }
-        :host([narrow]) .header-info mwc-button {
+        :host([narrow]) .header-info ha-button {
           margin-top: 16px;
           margin-bottom: 8px;
         }
@@ -1265,17 +1264,17 @@ export class HaMediaPlayerBrowse extends LitElement {
         :host(:not([narrow])[scrolled]) .header:not(.no-img) ha-icon-button {
           align-self: center;
         }
-        :host([scrolled]) .header-info mwc-button,
+        :host([scrolled]) .header-info ha-button,
-        .no-img .header-info mwc-button {
+        .no-img .header-info ha-button {
           padding-right: 4px;
         }
-        :host([scrolled][narrow]) .no-img .header-info mwc-button {
+        :host([scrolled][narrow]) .no-img .header-info ha-button {
           padding-right: 16px;
         }
         :host([scrolled]) .header-info {
           flex-direction: row;
         }
-        :host([scrolled]) .header-info mwc-button {
+        :host([scrolled]) .header-info ha-button {
           align-self: center;
           margin-top: 0;
           margin-bottom: 0;

src/components/media-player/ha-media-upload-button.ts

@@ -1,6 +1,5 @@
-import "@material/mwc-button";
 import { mdiUpload } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { MediaPlayerItem } from "../../data/media-player";
@@ -10,7 +9,7 @@ import {
 } from "../../data/media_source";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../types";
-import "../ha-spinner";
+import "../ha-button";
 import "../ha-svg-icon";
 
 declare global {
@@ -36,8 +35,13 @@ class MediaUploadButton extends LitElement {
       return nothing;
     }
     return html`
-      <mwc-button
+      <ha-button
-        .label=${this._uploading > 0
+        .disabled=${this._uploading > 0}
+        @click=${this._startUpload}
+        .loading=${this._uploading > 0}
+      >
+        <ha-svg-icon .path=${mdiUpload} slot="prefix"></ha-svg-icon>
+        ${this._uploading > 0
           ? this.hass.localize(
               "ui.components.media-browser.file_management.uploading",
               {
@@ -47,19 +51,7 @@ class MediaUploadButton extends LitElement {
           : this.hass.localize(
               "ui.components.media-browser.file_management.add_media"
             )}
-        .disabled=${this._uploading > 0}
+      </ha-button>
-        @click=${this._startUpload}
-      >
-        ${this._uploading > 0
-          ? html`
-              <ha-spinner
-                size="small"
-                area-label="Uploading"
-                slot="icon"
-              ></ha-spinner>
-            `
-          : html` <ha-svg-icon .path=${mdiUpload} slot="icon"></ha-svg-icon> `}
-      </mwc-button>
     `;
   }
 
@@ -107,24 +99,6 @@ class MediaUploadButton extends LitElement {
     document.body.append(input);
     input.click();
   }
-
-  static styles = css`
-    mwc-button {
-      /* We use icon + text to show disabled state */
-      --mdc-button-disabled-ink-color: --mdc-theme-primary;
-    }
-
-    ha-svg-icon[slot="icon"],
-    ha-spinner[slot="icon"] {
-      vertical-align: middle;
-    }
-
-    ha-svg-icon[slot="icon"] {
-      margin-inline-start: 0px;
-      margin-inline-end: 8px;
-      direction: var(--direction);
-    }
-  `;
 }
 
 declare global {

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.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";
@@ -6,6 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-formfield";
 import "../../components/ha-switch";
+import "../../components/ha-button";
 import type { HaSwitch } from "../../components/ha-switch";
 import type { ConfigEntryMutableParams } from "../../data/config_entries";
 import { updateConfigEntry } from "../../data/config_entries";
@@ -113,20 +113,21 @@ class DialogConfigEntrySystemOptions extends LitElement {
             .disabled=${this._submitting}
           ></ha-switch>
         </ha-formfield>
-        <mwc-button
+        <ha-button
-          slot="secondaryAction"
+          appearance="plain"
+          slot="primaryAction"
           @click=${this.closeDialog}
           .disabled=${this._submitting}
         >
           ${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.config_entry_system_options.update")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/dialogs/config-flow/previews/entity-preview-row.ts

@@ -7,6 +7,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/entity/state-badge";
+import "../../../components/ha-button";
 import "../../../components/ha-climate-state";
 import "../../../components/ha-cover-controls";
 import "../../../components/ha-cover-tilt-controls";
@@ -91,7 +92,7 @@ class EntityPreviewRow extends LitElement {
       justify-content: flex-end;
       width: 100%;
     }
-    mwc-button {
+    ha-button {
       margin-right: -0.57em;
       margin-inline-end: -0.57em;
       margin-inline-start: initial;
@@ -107,9 +108,13 @@ class EntityPreviewRow extends LitElement {
 
     if (domain === "button") {
       return html`
-        <mwc-button .disabled=${isUnavailableState(stateObj.state)}>
+        <ha-button
+          appearance="plain"
+          size="small"
+          .disabled=${isUnavailableState(stateObj.state)}
+        >
           ${this.hass.localize("ui.card.button.press")}
-        </mwc-button>
+        </ha-button>
       `;
     }
 
@@ -232,14 +237,16 @@ class EntityPreviewRow extends LitElement {
 
     if (domain === "lock") {
       return html`
-        <mwc-button
+        <ha-button
           .disabled=${isUnavailableState(stateObj.state)}
           class="text-content"
+          appearance="plain"
+          size="small"
         >
           ${stateObj.state === "locked"
             ? this.hass!.localize("ui.card.lock.unlock")
             : this.hass!.localize("ui.card.lock.lock")}
-        </mwc-button>
+        </ha-button>
       `;
     }
 

src/dialogs/config-flow/step-flow-external.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -6,6 +5,7 @@ import type { DataEntryFlowStepExternal } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import "../../components/ha-button";
 
 @customElement("step-flow-external")
 class StepFlowExternal extends LitElement {
@@ -22,13 +22,11 @@ class StepFlowExternal extends LitElement {
       <div class="content">
         ${this.flowConfig.renderExternalStepDescription(this.hass, this.step)}
         <div class="open-button">
-          <a href=${this.step.url} target="_blank" rel="noreferrer">
+          <ha-button href=${this.step.url} target="_blank" rel="noreferrer">
-            <mwc-button raised>
+            ${localize(
-              ${localize(
+              "ui.panel.config.integrations.config_flow.external_step.open_site"
-                "ui.panel.config.integrations.config_flow.external_step.open_site"
+            )}
-              )}
+          </ha-button>
-            </mwc-button>
-          </a>
         </div>
       </div>
     `;

src/dialogs/config-flow/step-flow-progress.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";

src/dialogs/image-cropper-dialog/image-cropper-dialog.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import Cropper from "cropperjs";
 // @ts-ignore
 import cropperCss from "cropperjs/dist/cropper.css";
@@ -7,6 +6,7 @@ import { css, html, nothing, LitElement, unsafeCSS } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import "../../components/ha-dialog";
+import "../../components/ha-button";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { HaImageCropperDialogParams } from "./show-image-cropper-dialog";
@@ -92,18 +92,26 @@ export class HaImagecropperDialog extends LitElement {
       >
         <img alt=${this.hass.localize("ui.dialogs.image_cropper.crop_image")} />
       </div>
-      <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>
       ${this._isTargetAspectRatio
-        ? html`<mwc-button slot="primaryAction" @click=${this._useOriginal}>
+        ? html`<ha-button
+            appearance="plain"
+            slot="primaryAction"
+            @click=${this._useOriginal}
+          >
             ${this.hass.localize("ui.dialogs.image_cropper.use_original")}
-          </mwc-button>`
+          </ha-button>`
         : nothing}
 
-      <mwc-button slot="primaryAction" @click=${this._cropImage}>
+      <ha-button slot="primaryAction" @click=${this._cropImage}>
         ${this.hass.localize("ui.dialogs.image_cropper.crop")}
-      </mwc-button>
+      </ha-button>
     </ha-dialog>`;
   }
 

src/dialogs/more-info/components/lights/light-color-rgb-picker.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiEyedropper } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";

src/dialogs/more-info/controls/more-info-automation.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -6,6 +5,7 @@ import "../../../components/ha-relative-time";
 import { triggerAutomationActions } from "../../../data/automation";
 import { isUnavailableState } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-button";
 
 @customElement("more-info-automation")
 class MoreInfoAutomation extends LitElement {
@@ -30,12 +30,14 @@ class MoreInfoAutomation extends LitElement {
       </div>
 
       <div class="actions">
-        <mwc-button
+        <ha-button
+          appearance="plain"
+          size="small"
           @click=${this._runActions}
           .disabled=${isUnavailableState(this.stateObj!.state)}
         >
           ${this.hass.localize("ui.card.automation.trigger")}
-        </mwc-button>
+        </ha-button>
       </div>
     `;
   }

src/dialogs/more-info/controls/more-info-configurator.ts

@@ -1,9 +1,8 @@
-import "@material/mwc-button";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-alert";
-import "../../../components/ha-spinner";
+import "../../../components/ha-button";
 import "../../../components/ha-markdown";
 import "../../../components/ha-textfield";
 import type { HomeAssistant } from "../../../types";
@@ -46,19 +45,13 @@ export class MoreInfoConfigurator extends LitElement {
         )}
         ${this.stateObj.attributes.submit_caption
           ? html`<p class="submit">
-              <mwc-button
+              <ha-button
-                raised
                 .disabled=${this._isConfiguring}
                 @click=${this._submitClicked}
+                .loading=${this._isConfiguring}
               >
-                ${this._isConfiguring
-                  ? html`<ha-spinner
-                      size="tiny"
-                      aria-label="Configuring"
-                    ></ha-spinner>`
-                  : ""}
                 ${this.stateObj.attributes.submit_caption}
-              </mwc-button>
+              </ha-button>
             </p>`
           : ""}
       </div>
@@ -113,12 +106,6 @@ export class MoreInfoConfigurator extends LitElement {
       text-align: center;
       height: 41px;
     }
-
-    ha-spinner {
-      --ha-spinner-indicator-color: var(--primary-text-color);
-      margin-right: auto;
-      margin-left: auto;
-    }
   `;
 }
 

src/dialogs/more-info/controls/more-info-counter.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-button";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isUnavailableState } from "../../../data/entity";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-button";
 
 @customElement("more-info-counter")
 class MoreInfoCounter extends LitElement {
@@ -20,29 +20,35 @@ class MoreInfoCounter extends LitElement {
 
     return html`
       <div class="actions">
-        <mwc-button
+        <ha-button
+          appearance="plain"
+          size="small"
           .action=${"increment"}
           @click=${this._handleActionClick}
           .disabled=${disabled ||
           Number(this.stateObj.state) === this.stateObj.attributes.maximum}
         >
           ${this.hass!.localize("ui.card.counter.actions.increment")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button
+        <ha-button
+          appearance="plain"
+          size="small"
           .action=${"decrement"}
           @click=${this._handleActionClick}
           .disabled=${disabled ||
           Number(this.stateObj.state) === this.stateObj.attributes.minimum}
         >
           ${this.hass!.localize("ui.card.counter.actions.decrement")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button
+        <ha-button
+          appearance="plain"
+          size="small"
           .action=${"reset"}
           @click=${this._handleActionClick}
           .disabled=${disabled}
         >
           ${this.hass!.localize("ui.card.counter.actions.reset")}
-        </mwc-button>
+        </ha-button>
       </div>
     `;
   }

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -1,5 +1,3 @@
-import "@material/mwc-button/mwc-button";
-
 import {
   mdiLoginVariant,
   mdiMusicNote,
@@ -18,6 +16,7 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
 import "../../../components/ha-select";
 import "../../../components/ha-slider";
+import "../../../components/ha-button";
 import "../../../components/ha-svg-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
 import { isUnavailableState } from "../../../data/entity";
@@ -69,17 +68,17 @@ class MoreInfoMediaPlayer extends LitElement {
         ${!isUnavailableState(stateObj.state) &&
         supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA)
           ? html`
-              <mwc-button
+              <ha-button
-                .label=${this.hass.localize(
-                  "ui.card.media_player.browse_media"
-                )}
                 @click=${this._showBrowseMedia}
+                appearance="plain"
+                size="small"
               >
                 <ha-svg-icon
                   .path=${mdiPlayBoxMultiple}
-                  slot="icon"
+                  slot="prefix"
                 ></ha-svg-icon>
-              </mwc-button>
+                ${this.hass.localize("ui.card.media_player.browse_media")}
+              </ha-button>
             `
           : ""}
       </div>
@@ -262,7 +261,7 @@ class MoreInfoMediaPlayer extends LitElement {
       font-style: italic;
     }
 
-    mwc-button > ha-svg-icon {
+    ha-button > ha-svg-icon {
       vertical-align: text-bottom;
     }
   `;

src/dialogs/more-info/controls/more-info-person.ts

@@ -1,10 +1,10 @@
-import "@material/mwc-button";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-attributes";
+import "../../../components/ha-button";
 import "../../../components/map/ha-map";
 import { showZoneEditor } from "../../../data/zone";
 import type { HomeAssistant } from "../../../types";
@@ -38,11 +38,15 @@ class MoreInfoPerson extends LitElement {
       this.stateObj.attributes.longitude
         ? html`
             <div class="actions">
-              <mwc-button @click=${this._handleAction}>
+              <ha-button
+                appearance="plain"
+                size="small"
+                @click=${this._handleAction}
+              >
                 ${this.hass.localize(
                   "ui.dialogs.more_info_control.person.create_zone"
                 )}
-              </mwc-button>
+              </ha-button>
             </div>
           `
         : ""}

src/dialogs/more-info/controls/more-info-script.ts

@@ -1,5 +1,4 @@
 import { mdiPlay, mdiStop } from "@mdi/js";
-import "@material/mwc-button";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";

src/dialogs/more-info/controls/more-info-timer.ts

@@ -1,7 +1,7 @@
-import "@material/mwc-button";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-attributes";
+import "../../../components/ha-button";
 import type { TimerEntity } from "../../../data/timer";
 import type { HomeAssistant } from "../../../types";
 
@@ -20,26 +20,46 @@ class MoreInfoTimer extends LitElement {
       <div class="actions">
         ${this.stateObj.state === "idle" || this.stateObj.state === "paused"
           ? html`
-              <mwc-button .action=${"start"} @click=${this._handleActionClick}>
+              <ha-button
+                appearance="plain"
+                size="small"
+                .action=${"start"}
+                @click=${this._handleActionClick}
+              >
                 ${this.hass!.localize("ui.card.timer.actions.start")}
-              </mwc-button>
+              </ha-button>
             `
           : ""}
         ${this.stateObj.state === "active"
           ? html`
-              <mwc-button .action=${"pause"} @click=${this._handleActionClick}>
+              <ha-button
+                appearance="plain"
+                size="small"
+                .action=${"pause"}
+                @click=${this._handleActionClick}
+              >
                 ${this.hass!.localize("ui.card.timer.actions.pause")}
-              </mwc-button>
+              </ha-button>
             `
           : ""}
         ${this.stateObj.state === "active" || this.stateObj.state === "paused"
           ? html`
-              <mwc-button .action=${"cancel"} @click=${this._handleActionClick}>
+              <ha-button
+                appearance="plain"
+                size="small"
+                .action=${"cancel"}
+                @click=${this._handleActionClick}
+              >
                 ${this.hass!.localize("ui.card.timer.actions.cancel")}
-              </mwc-button>
+              </ha-button>
-              <mwc-button .action=${"finish"} @click=${this._handleActionClick}>
+              <ha-button
+                appearance="plain"
+                size="small"
+                .action=${"finish"}
+                @click=${this._handleActionClick}
+              >
                 ${this.hass!.localize("ui.card.timer.actions.finish")}
-              </mwc-button>
+              </ha-button>
             `
           : ""}
       </div>

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

@@ -1,10 +1,10 @@
-import "@material/mwc-button";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { domainToName } from "../../data/integration";
 import type { PersitentNotificationEntity } from "../../data/persistent_notification";
 import type { HomeAssistant } from "../../types";
+import "../../components/ha-button";
 import "./notification-item-template";
 
 @customElement("configurator-notification-item")
@@ -31,9 +31,13 @@ export class HuiConfiguratorNotificationItem extends LitElement {
           })}
         </div>
 
-        <mwc-button slot="actions" @click=${this._handleClick}>
+        <ha-button
+          appearance="plain"
+          slot="actions"
+          @click=${this._handleClick}
+        >
           ${this.hass.formatEntityState(this.notification)}
-        </mwc-button>
+        </ha-button>
       </notification-item-template>
     `;
   }

src/dialogs/notifications/notification-drawer.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -10,6 +9,7 @@ import { subscribeNotifications } from "../../data/persistent_notification";
 import type { HomeAssistant } from "../../types";
 import "./notification-item";
 import "../../components/ha-header-bar";
+import "../../components/ha-button";
 import "../../components/ha-drawer";
 import type { HaDrawer } from "../../components/ha-drawer";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
@@ -122,11 +122,11 @@ export class HuiNotificationDrawer extends LitElement {
               )}
               ${this._notifications.length > 1
                 ? html`<div class="notification-actions">
-                    <mwc-button raised @click=${this._dismissAll}>
+                    <ha-button appearance="filled" @click=${this._dismissAll}>
                       ${this.hass.localize(
                         "ui.notification_drawer.dismiss_all"
                       )}
-                    </mwc-button>
+                    </ha-button>
                   </div>`
                 : ""}`
             : html` <div class="empty">

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -37,6 +37,7 @@ import { computeRTL } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
 import "../../components/ha-icon-button";
 import "../../components/ha-label";
+import "../../components/ha-button";
 import "../../components/ha-list";
 import "../../components/ha-md-list-item";
 import "../../components/ha-spinner";
@@ -246,10 +247,13 @@ export class QuickBar extends LitElement {
                     ></ha-icon-button>`}
                     ${this._narrow
                       ? html`
-                          <mwc-button
+                          <ha-button
-                            .label=${this.hass!.localize("ui.common.close")}
+                            appearance="plain"
+                            size="small"
                             @click=${this.closeDialog}
-                          ></mwc-button>
+                          >
+                            ${this.hass!.localize("ui.common.close")}
+                          </ha-button>
                         `
                       : ""}
                   </div>

src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiChevronLeft, mdiClose, mdiMenuDown } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import {
   mdiChevronDown,
   mdiClose,

src/layouts/ha-init-page.ts

@@ -1,8 +1,8 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { property, state } from "lit/decorators";
-import "@material/mwc-button";
 import "../components/ha-spinner";
+import "../components/ha-button";
 
 class HaInitPage extends LitElement {
   @property({ type: Boolean }) public error = false;
@@ -22,7 +22,7 @@ class HaInitPage extends LitElement {
           <p class="retry-text">
             Retrying in ${this._retryInSeconds} seconds...
           </p>
-          <mwc-button @click=${this._retry}>Retry now</mwc-button>
+          <ha-button @click=${this._retry}>Retry now</ha-button>
           ${location.host.includes("ui.nabu.casa")
             ? html`
                 <p>
@@ -66,7 +66,7 @@ class HaInitPage extends LitElement {
 
   protected willUpdate(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("error") && this.error) {
-      import("@material/mwc-button");
+      import("../components/ha-button");
     }
   }
 

src/layouts/hass-error-screen.ts

@@ -1,8 +1,8 @@
-import "@material/mwc-button";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../components/ha-icon-button-arrow-prev";
+import "../components/ha-button";
 import "../components/ha-menu-button";
 import type { HomeAssistant } from "../types";
 import "../components/ha-alert";
@@ -41,9 +41,9 @@ class HassErrorScreen extends LitElement {
       <div class="content">
         <ha-alert alert-type="error">${this.error}</ha-alert>
         <slot>
-          <mwc-button @click=${this._handleBack}>
+          <ha-button appearance="plain" size="small" @click=${this._handleBack}>
             ${this.hass?.localize("ui.common.back")}
-          </mwc-button>
+          </ha-button>
         </slot>
       </div>
     `;

src/layouts/hass-tabs-subpage-data-table.ts

@@ -1,5 +1,4 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import "@material/mwc-button/mwc-button";
 import {
   mdiArrowDown,
   mdiArrowUp,
@@ -768,12 +767,6 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     .active-filters ha-svg-icon {
       color: var(--primary-color);
     }
-    .active-filters mwc-button {
-      margin-left: 8px;
-      margin-inline-start: 8px;
-      margin-inline-end: initial;
-      direction: var(--direction);
-    }
     .active-filters::before {
       background-color: var(--primary-color);
       opacity: 0.12;

src/layouts/supervisor-error-screen.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";

src/panels/calendar/confirm-event-dialog-box.ts

@@ -47,7 +47,7 @@ class ConfirmEventDialogBox extends LitElement {
           slot="primaryAction"
           @click=${this._confirm}
           dialogInitialFocus
-          destructive
+          variant="danger"
         >
           ${this._params.confirmText}
         </ha-button>
@@ -56,7 +56,7 @@ class ConfirmEventDialogBox extends LitElement {
               <ha-button
                 @click=${this._confirmFuture}
                 slot="primaryAction"
-                destructive
+                variant="danger"
               >
                 ${this._params.confirmFutureText}
               </ha-button>

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiCalendarClock } from "@mdi/js";
 import { toDate } from "date-fns-tz";
 import { addDays, isSameDay } from "date-fns";
@@ -12,6 +11,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { isDate } from "../../common/string/is_date";
 import "../../components/entity/state-info";
 import "../../components/ha-alert";
+import "../../components/ha-button";
 import "../../components/ha-date-input";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-time-input";
@@ -99,24 +99,25 @@ class DialogCalendarEventDetail extends LitElement {
         </div>
         ${this._params.canDelete
           ? html`
-              <mwc-button
+              <ha-button
                 slot="secondaryAction"
-                class="warning"
+                variant="danger"
+                appearance="plain"
                 @click=${this._deleteEvent}
                 .disabled=${this._submitting}
               >
                 ${this.hass.localize("ui.components.calendar.event.delete")}
-              </mwc-button>
+              </ha-button>
             `
           : ""}
         ${this._params.canEdit
-          ? html`<mwc-button
+          ? html`<ha-button
               slot="primaryAction"
               @click=${this._editEvent}
               .disabled=${this._submitting}
             >
               ${this.hass.localize("ui.components.calendar.event.edit")}
-            </mwc-button>`
+            </ha-button>`
           : ""}
       </ha-dialog>
     `;

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { formatInTimeZone, toDate } from "date-fns-tz";
 import {
   addDays,
@@ -23,6 +22,7 @@ import "../../components/ha-date-input";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-formfield";
 import "../../components/ha-switch";
+import "../../components/ha-button";
 import "../../components/ha-textarea";
 import "../../components/ha-textfield";
 import "../../components/ha-time-input";
@@ -262,34 +262,34 @@ class DialogCalendarEventEditor extends LitElement {
         </div>
         ${isCreate
           ? html`
-              <mwc-button
+              <ha-button
                 slot="primaryAction"
                 @click=${this._createEvent}
                 .disabled=${this._submitting}
               >
                 ${this.hass.localize("ui.components.calendar.event.add")}
-              </mwc-button>
+              </ha-button>
             `
           : html`
-              <mwc-button
+              <ha-button
                 slot="primaryAction"
                 @click=${this._saveEvent}
                 .disabled=${this._submitting}
               >
                 ${this.hass.localize("ui.components.calendar.event.save")}
-              </mwc-button>
+              </ha-button>
               ${this._params.canDelete
                 ? html`
-                    <mwc-button
+                    <ha-button
                       slot="secondaryAction"
-                      class="warning"
+                      variant="danger"
                       @click=${this._deleteEvent}
                       .disabled=${this._submitting}
                     >
                       ${this.hass.localize(
                         "ui.components.calendar.event.delete"
                       )}
-                    </mwc-button>
+                    </ha-button>
                   `
                 : ""}
             `}

src/panels/calendar/ha-full-calendar.ts

@@ -5,7 +5,6 @@ import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import "@material/mwc-button";
 import {
   mdiPlus,
   mdiViewAgenda,
@@ -26,6 +25,7 @@ import "../../components/ha-button-toggle-group";
 import "../../components/ha-fab";
 import "../../components/ha-icon-button-next";
 import "../../components/ha-icon-button-prev";
+import "../../components/ha-button";
 import type {
   Calendar as CalendarData,
   CalendarEvent,
@@ -137,13 +137,14 @@ export class HAFullCalendar extends LitElement {
               ${!this.narrow
                 ? html`
                     <div class="navigation">
-                      <mwc-button
+                      <ha-button
-                        outlined
+                        appearance="filled"
+                        size="small"
                         class="today"
                         @click=${this._handleToday}
                         >${this.hass.localize(
                           "ui.components.calendar.today"
-                        )}</mwc-button
+                        )}</ha-button
                       >
                       <ha-icon-button-prev
                         .label=${this.hass.localize("ui.common.previous")}
@@ -184,13 +185,14 @@ export class HAFullCalendar extends LitElement {
                       </div>
                     </div>
                     <div class="controls buttons">
-                      <mwc-button
+                      <ha-button
-                        outlined
+                        appearance="plain"
+                        size="small"
                         class="today"
                         @click=${this._handleToday}
                         >${this.hass.localize(
                           "ui.components.calendar.today"
-                        )}</mwc-button
+                        )}</ha-button
                       >
                       <ha-button-toggle-group
                         .buttons=${viewToggleButtons}

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -11,6 +11,7 @@ import type {
   SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-fab";
+import "../../../components/ha-button";
 import "../../../components/ha-help-tooltip";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-icon-overflow-menu";
@@ -176,10 +177,14 @@ export class HaConfigApplicationCredentials extends LitElement {
         <div class="header-btns" slot="selection-bar">
           ${!this.narrow
             ? html`
-                <mwc-button @click=${this._deleteSelected} class="warning"
+                <ha-button
+                  appearance="plain"
+                  size="small"
+                  @click=${this._deleteSelected}
+                  variant="danger"
                   >${this.hass.localize(
                     "ui.panel.config.application_credentials.picker.remove_selected.button"
-                  )}</mwc-button
+                  )}</ha-button
                 >
               `
             : html`
@@ -349,7 +354,7 @@ export class HaConfigApplicationCredentials extends LitElement {
     .header-btns {
       display: flex;
     }
-    .header-btns > mwc-button,
+    .header-btns > ha-button,
     .header-btns > ha-icon-button {
       margin: 8px;
     }

src/panels/config/areas/ha-config-area-page.ts

@@ -1,5 +1,4 @@
 import { consume } from "@lit/context";
-import "@material/mwc-button";
 import { mdiDelete, mdiDotsVertical, mdiImagePlus, mdiPencil } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket/dist/types";
 import type { CSSResultGroup } from "lit";
@@ -16,6 +15,7 @@ import { groupBy } from "../../../common/util/group-by";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-button";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-list-item";
@@ -266,15 +266,18 @@ class HaConfigAreaPage extends LitElement {
                     class="img-edit-btn"
                   ></ha-icon-button>
                 </div>`
-              : html`<mwc-button
+              : html`<ha-button
+                  appearance="filled"
+                  size="small"
                   .entry=${area}
                   @click=${this._showSettings}
-                  .label=${this.hass.localize(
-                    "ui.panel.config.areas.add_picture"
-                  )}
                 >
-                  <ha-svg-icon .path=${mdiImagePlus} slot="icon"></ha-svg-icon>
+                  <ha-svg-icon
-                </mwc-button>`}
+                    .path=${mdiImagePlus}
+                    slot="prefix"
+                  ></ha-svg-icon>
+                  ${this.hass.localize("ui.panel.config.areas.add_picture")}
+                </ha-button>`}
             <ha-card
               outlined
               .header=${this.hass.localize("ui.panel.config.devices.caption")}
@@ -739,11 +742,6 @@ class HaConfigAreaPage extends LitElement {
           padding: 16px;
           color: var(--secondary-text-color);
         }
-
-        mwc-button > ha-svg-icon {
-          margin-inline-start: 0;
-          margin-inline-end: 8px;
-        }
       `,
     ];
   }

src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts

@@ -1,5 +1,3 @@
-import "@material/mwc-button";
-
 import { mdiClose, mdiHelpCircle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -10,6 +8,7 @@ import "../../../../components/ha-icon-button";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-radio";
+import "../../../../components/ha-button";
 import "../../../../components/ha-textfield";
 import "../../../../components/ha-dialog";
 
@@ -158,12 +157,16 @@ class DialogAutomationMode extends LitElement implements HassDialog {
             `
           : nothing}
 
-        <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 @click=${this._save} slot="primaryAction">
+        <ha-button @click=${this._save} slot="primaryAction">
           ${this.hass.localize("ui.panel.config.automation.editor.change_mode")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/automation/blueprint-automation-editor.ts

@@ -1,8 +1,8 @@
-import "@material/mwc-button/mwc-button";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-alert";
+import "../../../components/ha-button";
 import "../../../components/ha-markdown";
 import type { BlueprintAutomationConfig } from "../../../data/automation";
 import { fetchBlueprints } from "../../../data/blueprint";
@@ -26,11 +26,16 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.disabled"
               )}
-              <mwc-button slot="action" @click=${this._enable}>
+              <ha-button
+                appearance="plain"
+                size="small"
+                slot="action"
+                @click=${this._enable}
+              >
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.enable"
                 )}
-              </mwc-button>
+              </ha-button>
             </ha-alert>
           `
         : ""}

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

@@ -1,5 +1,4 @@
 import { consume } from "@lit/context";
-import "@material/mwc-button";
 import {
   mdiCog,
   mdiContentDuplicate,
@@ -31,6 +30,7 @@ import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-fab";
+import "../../../components/ha-button";
 import "../../../components/ha-fade-in";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
@@ -214,11 +214,15 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
       >
         ${this._config?.id && !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.automation.editor.show_trace"
                 )}
-              </mwc-button>
+              </ha-button>
             `
           : ""}
         <ha-button-menu slot="toolbar-icon">
@@ -427,11 +431,11 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                   "ui.panel.config.automation.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>`
@@ -440,11 +444,17 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                   >${this.hass.localize(
                     "ui.panel.config.automation.editor.read_only"
                   )}
-                  <mwc-button slot="action" @click=${this._duplicate}>
+                  <ha-button
+                    appearance="filled"
+                    size="small"
+                    variant="warning"
+                    slot="action"
+                    @click=${this._duplicate}
+                  >
                     ${this.hass.localize(
                       "ui.panel.config.automation.editor.migrate"
                     )}
-                  </mwc-button>
+                  </ha-button>
                 </ha-alert>`
               : nothing}
           ${this._mode === "gui"
@@ -487,11 +497,16 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                           ${this.hass.localize(
                             "ui.panel.config.automation.editor.disabled"
                           )}
-                          <mwc-button slot="action" @click=${this._toggle}>
+                          <ha-button
+                            appearance="filled"
+                            size="small"
+                            slot="action"
+                            @click=${this._toggle}
+                          >
                             ${this.hass.localize(
                               "ui.panel.config.automation.editor.enable"
                             )}
-                          </mwc-button>
+                          </ha-button>
                         </ha-alert>
                       `
                     : ""}

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

@@ -18,6 +18,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-button";
 import "../../../components/ha-list-item";
 import "../../../components/trace/ha-trace-blueprint-config";
 import "../../../components/trace/ha-trace-config";
@@ -106,11 +107,11 @@ export class HaAutomationTrace extends LitElement {
                 )}"
                 slot="toolbar-icon"
               >
-                <mwc-button>
+                <ha-button appearance="plain">
                   ${this.hass.localize(
                     "ui.panel.config.automation.trace.edit_automation"
                   )}
-                </mwc-button>
+                </ha-button>
               </a>
             `
           : ""}

src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts

@@ -155,11 +155,6 @@ export class HaConversationTrigger
     .option {
       margin-top: 4px;
     }
-    mwc-button {
-      margin-left: 8px;
-      margin-inline-start: 8px;
-      margin-inline-end: initial;
-    }
     ha-textfield {
       display: block;
       margin-bottom: 8px;

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

@@ -230,7 +230,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog {
       <ha-button @click=${this.closeDialog}>
         ${this.hass.localize("ui.common.cancel")}
       </ha-button>
-      <ha-button @click=${this._restoreBackup} destructive>
+      <ha-button @click=${this._restoreBackup} variant="danger">
         ${this.hass.localize(
           "ui.panel.config.backup.dialogs.restore.actions.restore"
         )}

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

@@ -189,7 +189,7 @@ class HaConfigBackupDetails extends LitElement {
                                   <ha-button
                                     slot="end"
                                     @click=${this._turnOffEncryption}
-                                    destructive
+                                    variant="danger"
                                   >
                                     ${this.hass.localize(
                                       "ui.panel.config.backup.location.encryption.encryption_turn_off"

src/panels/config/blueprint/blueprint-generic-editor.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";

src/panels/config/category/dialog-assign-category.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-icon-picker";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-textfield";
+import "../../../components/ha-button";
 import { updateEntityRegistryEntry } from "../../../data/entity_registry";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -70,16 +70,20 @@ class DialogAssignCategory extends LitElement {
             ></ha-category-picker>
           </div>
         </div>
-        <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._updateEntry}
-          .disabled=${this._submitting}
+          .disabled=${!!this._submitting}
         >
           ${this.hass.localize("ui.common.save")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/category/dialog-category-registry-detail.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";
@@ -7,6 +6,7 @@ import "../../../components/ha-alert";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-settings-row";
+import "../../../components/ha-button";
 import "../../../components/ha-textfield";
 import type {
   CategoryRegistryEntry,
@@ -96,18 +96,22 @@ class DialogCategoryDetail extends LitElement {
             ></ha-icon-picker>
           </div>
         </div>
-        <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._updateEntry}
-          .disabled=${nameInvalid || this._submitting}
+          .disabled=${nameInvalid || !!this._submitting}
         >
           ${entry
             ? this.hass.localize("ui.common.save")
             : this.hass.localize("ui.common.add")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/cloud/account/cloud-account.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -10,6 +9,7 @@ import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-tip";
+import "../../../../components/ha-button";
 import type {
   CloudStatusLoggedIn,
   SubscriptionInfo,
@@ -148,22 +148,21 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
               </div>
 
               <div class="card-actions">
-                <a
+                <ha-button
+                  appearance="plain"
                   href="https://account.nabucasa.com"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <mwc-button>
+                  ${this.hass.localize(
-                    ${this.hass.localize(
+                    "ui.panel.config.cloud.account.manage_account"
-                      "ui.panel.config.cloud.account.manage_account"
+                  )}
-                    )}
+                </ha-button>
-                  </mwc-button>
+                <ha-button @click=${this._signOut} variant="danger">
-                </a>
-                <mwc-button @click=${this._signOut} class="warning">
                   ${this.hass.localize(
                     "ui.panel.config.cloud.account.sign_out"
                   )}
-                </mwc-button>
+                </ha-button>
               </div>
             </ha-card>
           </ha-config-section>
@@ -359,7 +358,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
           flex-direction: row-reverse;
           justify-content: space-between;
         }
-        mwc-button {
+        ha-button {
           align-self: center;
         }
         .wrap {

src/panels/config/cloud/account/cloud-tts-pref.ts

@@ -1,10 +1,9 @@
-import "@material/mwc-button";
-
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
+import "../../../../components/ha-button";
 import "../../../../components/ha-language-picker";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-select";
@@ -103,9 +102,9 @@ export class CloudTTSPref extends LitElement {
           </div>
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._openTryDialog}>
+          <ha-button @click=${this._openTryDialog}>
             ${this.hass.localize("ui.panel.config.cloud.account.tts.try")}
-          </mwc-button>
+          </ha-button>
         </div>
       </ha-card>
     `;

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -3,6 +3,7 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import "../../../../components/ha-card";
+import "../../../../components/ha-button";
 import "../../../../components/ha-spinner";
 import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
@@ -93,11 +94,15 @@ export class CloudWebhooks extends LitElement {
                           `
                         : this._cloudHooks![entry.webhook_id]
                           ? html`
-                              <mwc-button @click=${this._handleManageButton}>
+                              <ha-button
+                                appearance="plain"
+                                size="small"
+                                @click=${this._handleManageButton}
+                              >
                                 ${this.hass!.localize(
                                   "ui.panel.config.cloud.account.webhooks.manage"
                                 )}
-                              </mwc-button>
+                              </ha-button>
                             `
                           : html`<ha-switch @click=${this._enableWebhook}>
                             </ha-switch>`}

src/panels/config/cloud/account/dialog-cloud-support-package.ts

@@ -1,5 +1,3 @@
-import "@material/mwc-button";
-
 import { mdiClose } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
@@ -7,6 +6,7 @@ import { computeStateName } from "../../../../../../common/entity/compute_state_
 import "../../../../../../components/ha-dialog";
 import "../../../../../../components/ha-formfield";
 import "../../../../../../components/ha-switch";
+import "../../../../../../components/ha-button";
 import type { HaSwitch } from "../../../../../../components/ha-switch";
 import type { MQTTDeviceDebugInfo } from "../../../../../../data/mqtt";
 import { fetchMQTTDebugInfo } from "../../../../../../data/mqtt";
@@ -107,9 +107,9 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
                 )}
               `}
         </ul>
-        <mwc-button slot="primaryAction" @click=${this._close}>
+        <ha-button slot="primaryAction" @click=${this._close}>
           ${this.hass!.localize("ui.common.close")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

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

@@ -1,10 +1,11 @@
-import "@material/mwc-button/mwc-button";
+import { mdiBatteryHigh, mdiDelete, mdiPencil, mdiPlus } from "@mdi/js";
-import { mdiBatteryHigh, mdiDelete, mdiPencil } from "@mdi/js";
 import type { CSSResultGroup, 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 "../../../../components/ha-svg-icon";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-settings-row";
 import type {
@@ -132,10 +133,15 @@ export class EnergyBatterySettings extends LitElement {
           })}
           <div class="row border-bottom">
             <ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
-            <mwc-button @click=${this._addSource}
+            <ha-button
-              >${this.hass.localize(
+              @click=${this._addSource}
+              appearance="filled"
+              size="small"
+            >
+              <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
+              ${this.hass.localize(
                 "ui.panel.config.energy.battery.add_battery_system"
-              )}</mwc-button
+              )}</ha-button
             >
           </div>
         </div>

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

@@ -1,11 +1,11 @@
-import "@material/mwc-button/mwc-button";
+import { mdiDelete, mdiDevices, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
-import { mdiDelete, mdiDevices, mdiDrag, mdiPencil } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { repeat } from "lit/directives/repeat";
 import { customElement, property } 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-sortable";
 import "../../../../components/ha-svg-icon";
@@ -117,10 +117,15 @@ export class EnergyDeviceSettings extends LitElement {
           </ha-sortable>
           <div class="row">
             <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
-            <mwc-button @click=${this._addDevice}
+            <ha-button
+              @click=${this._addDevice}
+              appearance="filled"
+              size="small"
+            >
+              <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon
               >${this.hass.localize(
                 "ui.panel.config.energy.device_consumption.add_device"
-              )}</mwc-button
+              )}</ha-button
             >
           </div>
         </div>

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

@@ -1,9 +1,9 @@
-import "@material/mwc-button/mwc-button";
+import { mdiDelete, mdiFire, mdiPencil, mdiPlus } from "@mdi/js";
-import { mdiDelete, mdiFire, mdiPencil } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-button";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
 import type {
@@ -120,10 +120,15 @@ export class EnergyGasSettings extends LitElement {
           })}
           <div class="row border-bottom">
             <ha-svg-icon .path=${mdiFire}></ha-svg-icon>
-            <mwc-button @click=${this._addSource}
+            <ha-button
+              @click=${this._addSource}
+              appearance="filled"
+              size="small"
+            >
+              <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon
               >${this.hass.localize(
                 "ui.panel.config.energy.gas.add_gas_source"
-              )}</mwc-button
+              )}</ha-button
             >
           </div>
         </div>

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

@@ -1,10 +1,10 @@
-import "@material/mwc-button/mwc-button";
+import { mdiDelete, mdiPencil, mdiPlus, mdiSolarPower } from "@mdi/js";
-import { mdiDelete, mdiPencil, mdiSolarPower } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { 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 "../../../../components/ha-icon-button";
 import type {
   EnergyInfo,
@@ -132,11 +132,16 @@ export class EnergySolarSettings extends LitElement {
             ? html`
                 <div class="row border-bottom">
                   <ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>
-                  <mwc-button @click=${this._addSource}>
+                  <ha-button
+                    @click=${this._addSource}
+                    appearance="filled"
+                    size="small"
+                  >
+                    <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
                     ${this.hass.localize(
                       "ui.panel.config.energy.solar.add_solar_production"
                     )}
-                  </mwc-button>
+                  </ha-button>
                 </div>
               `
             : ""}

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

@@ -1,10 +1,10 @@
-import "@material/mwc-button/mwc-button";
+import { mdiDelete, mdiWater, mdiPencil, mdiPlus } from "@mdi/js";
-import { mdiDelete, mdiWater, mdiPencil } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { 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 "../../../../components/ha-icon-button";
 import type {
   EnergyPreferences,
@@ -121,10 +121,15 @@ export class EnergyWaterSettings extends LitElement {
           })}
           <div class="row border-bottom">
             <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
-            <mwc-button @click=${this._addSource}
+            <ha-button
+              @click=${this._addSource}
+              appearance="filled"
+              size="small"
+            >
+              <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon
               >${this.hass.localize(
                 "ui.panel.config.energy.water.add_water_source"
-              )}</mwc-button
+              )}</ha-button
             >
           </div>
         </div>

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

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiFire } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -9,6 +8,7 @@ import "../../../../components/entity/ha-statistic-picker";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
+import "../../../../components/ha-button";
 import type { HaRadio } from "../../../../components/ha-radio";
 import "../../../../components/ha-textfield";
 import type { GasSourceTypeEnergyPreference } from "../../../../data/energy";
@@ -247,16 +247,20 @@ export class DialogEnergyGasSettings
             </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/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiTransmissionTower } 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";
@@ -280,10 +280,14 @@ export class DialogEnergyGridFlowSettings
             </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[
             this._params!.direction === "from"
@@ -293,7 +297,7 @@ export class DialogEnergyGridFlowSettings
           slot="primaryAction"
         >
           ${this.hass.localize("ui.common.save")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiContentCopy } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
@@ -1539,9 +1538,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
         li[divider] {
           border-bottom-color: var(--divider-color);
         }
-        ha-alert mwc-button {
-          width: max-content;
-        }
         .menu-item {
           border-radius: 4px;
           margin-top: 3px;

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

@@ -1563,7 +1563,6 @@ ${rejected
         .header-btns {
           display: flex;
         }
-        .header-btns > mwc-button,
         .header-btns > ha-icon-button {
           margin: 8px;
         }

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -235,11 +235,6 @@ class HaInputSelectForm extends LitElement {
           cursor: default;
           background-color: var(--card-background-color);
         }
-        mwc-button {
-          margin-left: 8px;
-          margin-inline-start: 8px;
-          margin-inline-end: initial;
-        }
         ha-textfield {
           display: block;
           margin-bottom: 8px;

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

@@ -1,5 +1,3 @@
-import "@material/mwc-button";
-
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
 import type { HassConfig } from "home-assistant-js-websocket";

src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiDelete } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";

src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts

@@ -1,9 +1,9 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatTime } from "../../../../../common/datetime/format_time";
 import "../../../../../components/ha-card";
+import "../../../../../components/ha-button";
 import "../../../../../components/ha-select";
 import "../../../../../components/ha-textfield";
 import type { MQTTMessage } from "../../../../../data/mqtt";
@@ -100,7 +100,9 @@ class MqttSubscribeCard extends LitElement {
                 (qos) => html`<ha-list-item .value=${qos}>${qos}</ha-list-item>`
               )}
             </ha-select>
-            <mwc-button
+            <ha-button
+              appearance="plain"
+              size="small"
               .disabled=${this._topic === ""}
               @click=${this._handleSubmit}
               type="submit"
@@ -108,7 +110,7 @@ class MqttSubscribeCard extends LitElement {
               ${this._subscribed
                 ? this.hass.localize("ui.panel.config.mqtt.stop_listening")
                 : this.hass.localize("ui.panel.config.mqtt.start_listening")}
-            </mwc-button>
+            </ha-button>
           </div>
         </form>
         <div class="events">

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

@@ -1,11 +1,10 @@
-import "@material/mwc-button";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state, query } 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-spinner";
+import "../../../../../components/ha-button";
 import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha";
 import { addGroup, fetchGroupableDevices } from "../../../../../data/zha";
 import "../../../../../layouts/hass-subpage";
@@ -97,24 +96,17 @@ export class ZHAAddGroupPage extends LitElement {
           </zha-device-endpoint-data-table>
 
           <div class="buttons">
-            <mwc-button
+            <ha-button
               .disabled=${!this._groupName ||
               this._groupName === "" ||
               this._processingAdd}
               @click=${this._createGroup}
               class="button"
+              .loading=${this._processingAdd}
             >
-              ${this._processingAdd
-                ? html`<ha-spinner
-                    size="small"
-                    .ariaLabel=${this.hass!.localize(
-                      "ui.panel.config.zha.groups.creating_group"
-                    )}
-                  ></ha-spinner>`
-                : ""}
               ${this.hass!.localize(
                 "ui.panel.config.zha.groups.create"
-              )}</mwc-button
+              )}</ha-button
             >
           </div>
         </ha-config-section>

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

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiPlus } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";

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

@@ -1,5 +1,3 @@
-import "@material/mwc-button/mwc-button";
-
 import {
   mdiCheckCircle,
   mdiCircle,

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts

@@ -1,5 +1,3 @@
-import "@material/mwc-button/mwc-button";
-
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";

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

@@ -1,8 +1,8 @@
 import { mdiPlus } from "@mdi/js";
-
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { stringCompare } from "../../../common/string/compare";
+import "../../../components/ha-button";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-list";
@@ -117,10 +117,15 @@ export class HaConfigPerson extends LitElement {
                     ${hass.localize(
                       "ui.panel.config.person.no_persons_created_yet"
                     )}
-                    <mwc-button @click=${this._createPerson}>
+                    <ha-button
+                      @click=${this._createPerson}
+                      appearance="filled"
+                      size="small"
+                    >
+                      <ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon>
                       ${hass.localize(
                         "ui.panel.config.person.create_person"
-                      )}</mwc-button
+                      )}</ha-button
                     >
                   </div>
                 `

src/panels/config/repairs/dialog-integration-startup.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";

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

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-markdown";

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

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { mdiPlus } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -47,14 +46,13 @@ export default class HaScriptFields extends LitElement {
           </div> `
         : nothing}
       <ha-button
-        outlined
+        appearance="filled"
+        size="small"
         @click=${this._addField}
         .disabled=${this.disabled}
-        .label=${this.hass.localize(
-          "ui.panel.config.script.editor.field.add_field"
-        )}
       >
-        <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+        <ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon>
+        ${this.hass.localize("ui.panel.config.script.editor.field.add_field")}
       </ha-button>
     `;
   }

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

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiHelpCircle } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";

src/panels/config/voice-assistants/dialog-voice-settings.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { mdiClose, mdiTuneVertical } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";

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

@@ -10,6 +10,7 @@ import { navigate } from "../../../common/navigate";
 import { stringCompare } from "../../../common/string/compare";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
+import "../../../components/ha-button";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list";
 import "../../../components/ha-list-item";
@@ -136,8 +137,8 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
             <div class="empty">
               ${hass.localize("ui.panel.config.zone.no_zones_created_yet")}
               <br />
-              <mwc-button @click=${this._createZone}>
+              <ha-button size="small" @click=${this._createZone}>
-                ${hass.localize("ui.panel.config.zone.create_zone")}</mwc-button
+                ${hass.localize("ui.panel.config.zone.create_zone")}</ha-button
               >
             </div>
           `

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

@@ -164,7 +164,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
         ${this._results.length
           ? html`
               <div class="result-toolbar">
-                <ha-button outlined @click=${this._clear} destructive>
+                <ha-button outlined @click=${this._clear} variant="danger">
                   <ha-svg-icon slot="icon" .path=${mdiTrashCan}></ha-svg-icon>
                   ${this.hass.localize("ui.common.clear")}
                 </ha-button>

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

@@ -1,7 +1,7 @@
 import { differenceInDays, endOfDay } from "date-fns";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatDate } from "../../../../common/datetime/format_date";
 import type { EnergyData } from "../../../../data/energy";
@@ -126,12 +126,6 @@ export class HuiEnergyCompareCard
     energyCollection.setCompare(false);
     energyCollection.refresh();
   }
-
-  static styles = css`
-    mwc-button {
-      width: max-content;
-    }
-  `;
 }
 
 declare global {

src/panels/lovelace/cards/hui-recovery-mode-card.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";

src/panels/lovelace/cards/hui-starting-card.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";

src/panels/lovelace/components/hui-energy-period-selector.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import {
@@ -34,6 +33,7 @@ import {
 } from "../../../common/datetime/format_date";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-button-menu";
+import "../../../components/ha-button";
 import "../../../components/ha-check-list-item";
 import "../../../components/ha-date-range-picker";
 import type { DateRangePickerRanges } from "../../../components/ha-date-range-picker";
@@ -205,11 +205,15 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
         </div>
 
         ${!this.narrow
-          ? html`<mwc-button dense outlined @click=${this._pickNow}>
+          ? html`<ha-button
+              appearance="filled"
+              size="small"
+              click=${this._pickNow}
+            >
               ${this.hass.localize(
                 "ui.panel.lovelace.components.energy_period_selector.now"
               )}
-            </mwc-button>`
+            </ha-button>`
           : nothing}
 
         <ha-button-menu>
@@ -485,17 +489,12 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
       margin-inline-start: unset;
       margin-inline-end: initial;
     }
-    mwc-button {
+    ha-button {
       margin-left: 8px;
       margin-inline-start: 8px;
       margin-inline-end: initial;
       flex-shrink: 0;
-      --mdc-button-outline-color: currentColor;
+      --ha-button-theme-color: currentColor;
-      --primary-color: currentColor;
-      --mdc-theme-primary: currentColor;
-      --mdc-theme-on-primary: currentColor;
-      --mdc-button-disabled-outline-color: var(--disabled-text-color);
-      --mdc-button-disabled-ink-color: var(--disabled-text-color);
     }
   `;
 }

src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts

@@ -7,6 +7,7 @@ import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../../cards/hui-card";
+import "../../../../components/ha-button";
 import type { DeleteCardDialogParams } from "./show-delete-card-dialog";
 
 @customElement("hui-dialog-delete-card")
@@ -55,16 +56,17 @@ export class HuiDialogDeleteCard extends LitElement {
               `
             : ""}
         </div>
-        <mwc-button
+        <ha-button
-          slot="secondaryAction"
+          appearance="plain"
+          slot="primaryAction"
           @click=${this.closeDialog}
           dialogInitialFocus
         >
           ${this.hass!.localize("ui.common.cancel")}
-        </mwc-button>
+        </ha-button>
-        <mwc-button slot="primaryAction" class="warning" @click=${this._delete}>
+        <ha-button slot="primaryAction" class="warning" @click=${this._delete}>
           ${this.hass!.localize("ui.common.delete")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }

src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts

@@ -115,10 +115,13 @@ export class HuiConditionalCardEditor
                         .path=${mdiContentCopy}
                         @click=${this._handleCopyCard}
                       ></ha-icon-button>
-                      <mwc-button @click=${this._handleReplaceCard}
+                      <ha-button
+                        appearance="plain"
+                        size="small"
+                        @click=${this._handleReplaceCard}
                         >${this.hass!.localize(
                           "ui.panel.lovelace.editor.card.conditional.change_type"
-                        )}</mwc-button
+                        )}</ha-button
                       >
                     </div>
                     <hui-card-element-editor

src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts

@@ -1,8 +1,8 @@
-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 "../../../../components/ha-button";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -80,9 +80,9 @@ export class HuiCreateDialogHeaderFooter
           )}
         </div>
         <div slot="primaryAction">
-          <mwc-button @click=${this._cancel}>
+          <ha-button @click=${this._cancel}>
             ${this.hass!.localize("ui.common.cancel")}
-          </mwc-button>
+          </ha-button>
         </div>
       </ha-dialog>
     `;

src/panels/lovelace/entity-rows/hui-lock-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";
@@ -7,6 +6,7 @@ import type { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
+import "../../../components/ha-button";
 import type { ConfirmableRowConfig, LovelaceRow } from "./types";
 import { callProtectedLockService } from "../../../data/lock";
 import { confirmAction } from "../common/confirm-action";
@@ -45,7 +45,9 @@ class HuiLockEntityRow 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._callService}
           .disabled=${isUnavailableState(stateObj.state)}
           class="text-content"
@@ -53,13 +55,13 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow {
           ${stateObj.state === "locked"
             ? this.hass!.localize("ui.card.lock.unlock")
             : this.hass!.localize("ui.card.lock.lock")}
-        </mwc-button>
+        </ha-button>
       </hui-generic-entity-row>
     `;
   }
 
   static styles = css`
-    mwc-button {
+    ha-button {
       margin-right: -0.57em;
       margin-inline-end: -0.57em;
       margin-inline-start: initial;

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

@@ -1,8 +1,8 @@
-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 "../../../components/entity/ha-entity-toggle";
+import "../../../components/ha-button";
 import { UNAVAILABLE } from "../../../data/entity";
 import { activateScene } from "../../../data/scene";
 import type { HomeAssistant } from "../../../types";
@@ -46,20 +46,22 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <mwc-button
+        <ha-button
+          appearance="filled"
+          size="small"
           @click=${this._callService}
           .disabled=${stateObj.state === UNAVAILABLE}
           class="text-content"
         >
           ${this._config.action_name ||
           this.hass!.localize("ui.card.scene.activate")}
-        </mwc-button>
+        </ha-button>
       </hui-generic-entity-row>
     `;
   }
 
   static styles = css`
-    mwc-button {
+    ha-button {
       margin-right: -0.57em;
       margin-inline-end: -0.57em;
       margin-inline-start: initial;

src/panels/lovelace/entity-rows/hui-script-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";
@@ -9,6 +8,7 @@ import type { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
+import "../../../components/ha-button";
 import type { ActionRowConfig, LovelaceRow } from "./types";
 import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import { confirmAction } from "../common/confirm-action";
@@ -48,7 +48,11 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
         ${stateObj.state === "on"
-          ? html`<mwc-button @click=${this._cancelScript}>
+          ? html`<ha-button
+              appearance="filled"
+              size="small"
+              @click=${this._cancelScript}
+            >
               ${stateObj.attributes.mode !== "single" &&
               stateObj.attributes.current &&
               stateObj.attributes.current > 0
@@ -56,24 +60,26 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
                     number: stateObj.attributes.current,
                   })
                 : this.hass.localize("ui.card.script.cancel")}
-            </mwc-button>`
+            </ha-button>`
           : ""}
         ${stateObj.state === "off" || stateObj.attributes.max
-          ? html`<mwc-button
+          ? html`<ha-button
+              appearance="filled"
+              size="small"
               @click=${this._runScript}
               .disabled=${isUnavailableState(stateObj.state) ||
               !canRun(stateObj)}
             >
               ${this._config.action_name ||
               this.hass!.localize("ui.card.script.run")}
-            </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/special-rows/hui-button-row.ts

@@ -1,10 +1,10 @@
-import "@material/mwc-button";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-state-icon";
+import "../../../components/ha-button";
 import type { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
@@ -61,7 +61,9 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
       </ha-state-icon>
       <div class="flex">
         <div .title=${name}>${name}</div>
-        <mwc-button
+        <ha-button
+          appearance="filled"
+          size="small"
           @action=${this._handleAction}
           .actionHandler=${actionHandler({
             hasHold: hasAction(this._config!.hold_action),
@@ -69,7 +71,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
           })}
           >${this._config.action_name
             ? this._config.action_name
-            : this.hass!.localize("ui.card.service.run")}</mwc-button
+            : this.hass!.localize("ui.card.service.run")}</ha-button
         >
       </div>
     `;
@@ -99,7 +101,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    mwc-button {
+    ha-button {
       margin-right: -0.57em;
       margin-inline-end: -0.57em;
       margin-inline-start: initial;

src/panels/lovelace/special-rows/hui-cast-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";
@@ -8,6 +7,7 @@ import {
   castSendShowLovelaceView,
   ensureConnectedCastSession,
 } from "../../../cast/receiver_messages";
+import "../../../components/ha-button";
 import "../../../components/ha-icon";
 import type { HomeAssistant } from "../../../types";
 import type { CastConfig, LovelaceRow } from "../entity-rows/types";
@@ -61,14 +61,15 @@ class HuiCastRow extends LitElement implements LovelaceRow {
                 : html`
                     <div class="controls">
                       <google-cast-launcher></google-cast-launcher>
-                      <mwc-button
+                      <ha-button
                         @click=${this._sendLovelace}
                         class=${classMap({ inactive: !active })}
-                        .unelevated=${active}
+                        appearance="plain"
+                        size="small"
                         .disabled=${!this._castManager.status}
                       >
                         SHOW
-                      </mwc-button>
+                      </ha-button>
                     </div>
                   `}
       </div>

src/panels/media-browser/ha-panel-media-browser.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiAlphaABoxOutline,