migrate buttons

src/components/ha-copy-textfield.ts

@@ -1,14 +1,14 @@
-import { customElement, property, state } from "lit/decorators";
-import { css, html, LitElement, nothing } from "lit";
 import { mdiContentCopy, mdiEye, mdiEyeOff } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
 
+import { copyToClipboard } from "../common/util/copy-clipboard";
+import type { HomeAssistant } from "../types";
+import { showToast } from "../util/toast";
 import "./ha-button";
 import "./ha-icon-button";
 import "./ha-svg-icon";
 import "./ha-textfield";
-import type { HomeAssistant } from "../types";
-import { copyToClipboard } from "../common/util/copy-clipboard";
-import { showToast } from "../util/toast";
 import type { HaTextField } from "./ha-textfield";
 
 @customElement("ha-copy-textfield")
@@ -48,8 +48,8 @@ export class HaCopyTextfield extends LitElement {
               ></ha-icon-button>`
             : nothing}
         </div>
-        <ha-button @click=${this._copy} unelevated>
+        <ha-button @click=${this._copy} appearance="filled">
-          <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
+          <ha-svg-icon slot="prefix" .path=${mdiContentCopy}></ha-svg-icon>
           ${this.label || this.hass.localize("ui.common.copy")}
         </ha-button>
       </div>

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

@@ -137,7 +137,7 @@ export class HaObjectSelector extends LitElement {
                 ${items.map((item, index) => this._renderItem(item, index))}
               </ha-md-list>
             </ha-sortable>
-            <ha-button outlined @click=${this._addItem}>
+            <ha-button appearance="filled" @click=${this._addItem}>
               ${this.hass.localize("ui.common.add")}
             </ha-button>
           </div>
@@ -152,7 +152,7 @@ export class HaObjectSelector extends LitElement {
                 ${this._renderItem(this.value, 0)}
               </ha-md-list>`
             : html`
-                <ha-button outlined @click=${this._addItem}>
+                <ha-button appearance="filled" @click=${this._addItem}>
                   ${this.hass.localize("ui.common.add")}
                 </ha-button>
               `}

src/components/media-player/dialog-join-media-players.ts

@@ -1,28 +1,28 @@
-import type { CSSResultGroup } from "lit";
 import { mdiClose } from "@mdi/js";
+import type { HassEntity } from "home-assistant-js-websocket";
+import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import type { HassEntity } from "home-assistant-js-websocket";
 import { fireEvent } from "../../common/dom/fire_event";
-import { haStyleDialog } from "../../resources/styles";
+import { computeDomain } from "../../common/entity/compute_domain";
-import type { HomeAssistant } from "../../types";
-import "../ha-alert";
-import "../ha-dialog";
-import "../ha-button";
-import "../ha-dialog-header";
-import "./ha-media-player-toggle";
-import type { JoinMediaPlayersDialogParams } from "./show-join-media-players-dialog";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { supportsFeature } from "../../common/entity/supports-feature";
+import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
+import { extractApiErrorMessage } from "../../data/hassio/common";
 import {
   type MediaPlayerEntity,
   MediaPlayerEntityFeature,
   mediaPlayerJoin,
   mediaPlayerUnjoin,
 } from "../../data/media-player";
-import { extractApiErrorMessage } from "../../data/hassio/common";
+import { haStyleDialog } from "../../resources/styles";
-import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
+import type { HomeAssistant } from "../../types";
-import { computeDomain } from "../../common/entity/compute_domain";
+import "../ha-alert";
+import "../ha-button";
+import "../ha-dialog";
+import "../ha-dialog-header";
+import "./ha-media-player-toggle";
+import type { JoinMediaPlayersDialogParams } from "./show-join-media-players-dialog";
 
 @customElement("dialog-join-media-players")
 class DialogJoinMediaPlayers extends LitElement {
@@ -90,7 +90,11 @@ class DialogJoinMediaPlayers extends LitElement {
           <span slot="title"
             >${this.hass.localize("ui.card.media_player.media_players")}</span
           >
-          <ha-button slot="actionItems" @click=${this._selectAll}>
+          <ha-button
+            appearance="plain"
+            slot="actionItems"
+            @click=${this._selectAll}
+          >
             ${this.hass.localize("ui.card.media_player.select_all")}
           </ha-button>
         </ha-dialog-header>
@@ -114,11 +118,15 @@ class DialogJoinMediaPlayers extends LitElement {
               ></ha-media-player-toggle>`
           )}
         </div>
-        <ha-button slot="secondaryAction" @click=${this.closeDialog}>
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+        >
           ${this.hass.localize("ui.common.cancel")}
         </ha-button>
         <ha-button
-          .disabled=${this._submitting}
+          .disabled=${!!this._submitting}
           slot="primaryAction"
           @click=${this._submit}
         >

src/components/media-player/dialog-media-manage.ts

@@ -127,7 +127,7 @@ class DialogMediaManage extends LitElement {
                   )}
                   @click=${this._handleDelete}
                 >
-                  <ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
+                  <ha-svg-icon .path=${mdiDelete} slot="prefix"></ha-svg-icon>
                 </ha-button>
 
                 ${this._deleting

src/dialogs/enter-code/dialog-enter-code.ts

@@ -110,7 +110,11 @@ export class DialogEnterCode
             pattern=${ifDefined(this._dialogParams.codePattern)}
             inputmode="text"
           ></ha-textfield>
-          <ha-button slot="secondaryAction" dialogAction="cancel">
+          <ha-button
+            appearance="plain"
+            slot="secondaryAction"
+            dialogAction="cancel"
+          >
             ${this._dialogParams.cancelText ??
             this.hass.localize("ui.common.cancel")}
           </ha-button>

src/dialogs/form/dialog-form.ts

@@ -4,10 +4,10 @@ import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-form/ha-form";
+import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { HassDialog } from "../make-dialog-manager";
 import type { FormDialogData, FormDialogParams } from "./show-form-dialog";
-import { haStyleDialog } from "../../resources/styles";
 
 @customElement("dialog-form")
 export class DialogForm
@@ -69,7 +69,11 @@ export class DialogForm
           @value-changed=${this._valueChanged}
         >
         </ha-form>
-        <ha-button @click=${this._cancel} slot="secondaryAction">
+        <ha-button
+          appearance="plain"
+          @click=${this._cancel}
+          slot="secondaryAction"
+        >
           ${this._params.cancelText || this.hass.localize("ui.common.cancel")}
         </ha-button>
         <ha-button @click=${this._submit} slot="primaryAction">

src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts

@@ -97,17 +97,16 @@ export class CloudStepIntro extends LitElement {
         </div>
       </div>
       <div class="footer side-by-side">
-        <a
+        <ha-button
           href="https://www.nabucasa.com"
           target="_blank"
           rel="noreferrer noopener"
+          appearance="plain"
         >
-          <ha-button>
+          <ha-svg-icon .path=${mdiOpenInNew} slot="prefix"></ha-svg-icon>
-            <ha-svg-icon .path=${mdiOpenInNew} slot="icon"></ha-svg-icon>
+          nabucasa.com
-            nabucasa.com
+        </ha-button>
-          </ha-button>
+        <ha-button @click=${this._signUp}
-        </a>
-        <ha-button unelevated @click=${this._signUp}
           >${this.hass.localize(
             "ui.panel.config.cloud.register.headline"
           )}</ha-button

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-area.ts

@@ -1,11 +1,11 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-area-picker";
 import { updateDeviceRegistryEntry } from "../../data/device_registry";
 import type { HomeAssistant } from "../../types";
 import { showAlertDialog } from "../generic/show-dialog-box";
 import { AssistantSetupStyles } from "./styles";
-import "../../components/ha-area-picker";
 
 @customElement("ha-voice-assistant-setup-step-area")
 export class HaVoiceAssistantSetupStepArea extends LitElement {
@@ -37,7 +37,7 @@ export class HaVoiceAssistantSetupStepArea extends LitElement {
         ></ha-area-picker>
       </div>
       <div class="footer">
-        <ha-button @click=${this._setArea} unelevated
+        <ha-button @click=${this._setArea}
           >${this.hass.localize("ui.common.next")}</ha-button
         >
       </div>`;

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts

@@ -180,7 +180,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
         </div>
       </div>
       <div class="footer">
-        <ha-button @click=${this._done} unelevated
+        <ha-button @click=${this._done}
           >${this.hass.localize(
             "ui.panel.config.voice_assistants.satellite_wizard.success.done"
           )}</ha-button

src/onboarding/onboarding-integrations.ts

@@ -176,7 +176,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
           : nothing}
       </div>
       <div class="footer">
-        <ha-button unelevated @click=${this._finish}>
+        <ha-button @click=${this._finish}>
           ${this.onboardingLocalize(
             "ui.panel.page-onboarding.integration.finish"
           )}

src/panels/config/cloud/dialog-cloud-already-connected/dialog-cloud-already-connected.ts

@@ -1,17 +1,17 @@
+import { mdiEye, mdiEyeOff } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
-import { mdiEye, mdiEyeOff } from "@mdi/js";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
-import "../../../../components/ha-icon-button";
 import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-icon-button";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import type { CloudAlreadyConnectedParams as CloudAlreadyConnectedDialogParams } from "./show-dialog-cloud-already-connected";
 import { obfuscateUrl } from "../../../../util/url";
+import type { CloudAlreadyConnectedParams as CloudAlreadyConnectedDialogParams } from "./show-dialog-cloud-already-connected";
 
 @customElement("dialog-cloud-already-connected")
 class DialogCloudAlreadyConnected extends LitElement {
@@ -131,7 +131,11 @@ class DialogCloudAlreadyConnected extends LitElement {
           )}
         </ha-alert>
 
-        <ha-button @click=${this.closeDialog} slot="secondaryAction">
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="secondaryAction"
+        >
           ${this.hass!.localize("ui.common.cancel")}
         </ha-button>
         <ha-button @click=${this._logInHere} slot="primaryAction">

src/panels/config/integrations/integration-panels/bluetooth/dialog-bluetooth-device-info.ts

@@ -2,13 +2,13 @@ import type { TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
-import type { HomeAssistant } from "../../../../../types";
-import type { BluetoothDeviceInfoDialogParams } from "./show-dialog-bluetooth-device-info";
-import "../../../../../components/ha-button";
-import { showToast } from "../../../../../util/toast";
 import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
+import "../../../../../components/ha-button";
+import { createCloseHeading } from "../../../../../components/ha-dialog";
+import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
+import type { HomeAssistant } from "../../../../../types";
+import { showToast } from "../../../../../util/toast";
+import type { BluetoothDeviceInfoDialogParams } from "./show-dialog-bluetooth-device-info";
 
 @customElement("dialog-bluetooth-device-info")
 class DialogBluetoothDeviceInfo extends LitElement implements HassDialog {
@@ -117,7 +117,10 @@ class DialogBluetoothDeviceInfo extends LitElement implements HassDialog {
           </tbody>
         </table>
 
-        <ha-button slot="secondaryAction" @click=${this._copyToClipboard}
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          @click=${this._copyToClipboard}
           >${this.hass.localize(
             "ui.panel.config.bluetooth.copy_to_clipboard"
           )}</ha-button

src/panels/config/integrations/integration-panels/zeroconf/dialog-zeroconf-discovery-info.ts

@@ -2,13 +2,13 @@ import type { TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
-import type { HomeAssistant } from "../../../../../types";
-import type { ZeroconfDiscoveryInfoDialogParams } from "./show-dialog-zeroconf-discovery-info";
-import "../../../../../components/ha-button";
-import { showToast } from "../../../../../util/toast";
 import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
+import "../../../../../components/ha-button";
+import { createCloseHeading } from "../../../../../components/ha-dialog";
+import type { HassDialog } from "../../../../../dialogs/make-dialog-manager";
+import type { HomeAssistant } from "../../../../../types";
+import { showToast } from "../../../../../util/toast";
+import type { ZeroconfDiscoveryInfoDialogParams } from "./show-dialog-zeroconf-discovery-info";
 
 @customElement("dialog-zeroconf-device-info")
 class DialogZeroconfDiscoveryInfo extends LitElement implements HassDialog {
@@ -95,7 +95,10 @@ class DialogZeroconfDiscoveryInfo extends LitElement implements HassDialog {
           </tbody>
         </table>
 
-        <ha-button slot="secondaryAction" @click=${this._copyToClipboard}
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          @click=${this._copyToClipboard}
           >${this.hass.localize(
             "ui.panel.config.zeroconf.copy_to_clipboard"
           )}</ha-button

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

@@ -187,7 +187,11 @@ export class HuiDialogEditSection
             : nothing}
         </ha-dialog-header>
         ${content}
-        <ha-button slot="secondaryAction" @click=${this._cancel}>
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          @click=${this._cancel}
+        >
           ${this.hass!.localize("ui.common.cancel")}
         </ha-button>