Fix ha-button with missing label and links (#26332)

.github/copilot-instructions.md

@@ -310,7 +310,11 @@ export class DialogMyFeature
         .heading=${createCloseHeading(this.hass, this._params.title)}
       >
         <!-- Dialog content -->
-        <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._submit} slot="primaryAction">

demo/src/custom-cards/ha-demo-card.ts

@@ -89,11 +89,14 @@ export class HADemoCard extends LitElement implements LovelaceCard {
           )}
         </div>
         <div class="actions small-hidden">
-          <a href="https://www.home-assistant.io" target="_blank">
+          <ha-button
-            <ha-button>
+            appearance="plain"
+            size="small"
+            href="https://www.home-assistant.io"
+            target="_blank"
+          >
             ${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
           </ha-button>
-          </a>
         </div>
       </ha-card>
     `;

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

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

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

@@ -78,21 +78,13 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action",
     type: "error",
-    actionSlot: html`<ha-button
+    actionSlot: html`<ha-button size="small" slot="action">restart</ha-button>`,
-      size="small"
-      slot="action"
-      label="restart"
-    ></ha-button>`,
   },
   {
     title: "Unsaved data",
     description: "You have unsaved data",
     type: "warning",
-    actionSlot: html`<ha-button
+    actionSlot: html`<ha-button size="small" slot="action">save</ha-button>`,
-      size="small"
-      slot="action"
-      label="save"
-    ></ha-button>`,
   },
   {
     title: "Slotted icon",
@@ -116,7 +108,7 @@ const alerts: {
     title: "Slotted action",
     description: "Alert with slotted action",
     type: "info",
-    actionSlot: html`<ha-button slot="action" label="action"></ha-button>`,
+    actionSlot: html`<ha-button slot="action">action</ha-button>`,
   },
   {
     description: "Dismissable information (RTL)",
@@ -128,7 +120,7 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action (RTL)",
     type: "error",
-    actionSlot: html`<ha-button slot="action" label="restart"></ha-button>`,
+    actionSlot: html`<ha-button slot="action">restart</ha-button>`,
     rtl: true,
   },
   {

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

@@ -54,11 +54,12 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
 **Properties/Attributes**
 
 | Name       | Type                                           | Default  | Description                                                                       |
-| ----------- | ---------------------------------------------- | -------- | -------------------------------------------------- |
+| ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
 | appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
 | variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
 | size       | "small"/"medium"                               | "medium" | Sets the button size.                                                             |
-| hideContent | Boolean                                        | false    | Hides the button content (for overlays)            |
+| loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |
+| disabled   | Boolean                                        | false    | Disables the button and prevents user interaction.                                |
 
 **CSS Custom Properties**
 

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

@@ -604,8 +604,8 @@ export class DialogHassioNetwork
             var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
           display: flex;
           justify-content: space-between;
-          padding: 8px;
+          padding: 16px;
-          padding-bottom: max(var(--safe-area-inset-bottom), 8px);
+          padding-bottom: max(var(--safe-area-inset-bottom), 16px);
           background-color: var(--mdc-theme-surface, #fff);
         }
         .warning {

hassio/src/update-available/update-available-card.ts

@@ -208,14 +208,16 @@ class UpdateAvailableCard extends LitElement {
               <div class="card-actions">
                 ${changelog
                   ? html`
-                      <a href=${changelog} target="_blank" rel="noreferrer">
                       <ha-button
-                          .label=${this.supervisor.localize(
+                        href=${changelog}
+                        target="_blank"
+                        rel="noreferrer"
+                        appearance="plain"
+                      >
+                        ${this.supervisor.localize(
                           "update_available.open_release_notes"
                         )}
-                        >
                       </ha-button>
-                      </a>
                     `
                   : nothing}
                 <span></span>

landing-page/src/components/landing-page-logs.ts

@@ -110,12 +110,9 @@ class LandingPageLogs extends LitElement {
         })}"
         @click=${this._scrollToBottom}
       >
-        <ha-svg-icon .path=${mdiArrowCollapseDown} slot="icon"></ha-svg-icon>
+        <ha-svg-icon .path=${mdiArrowCollapseDown} slot="start"></ha-svg-icon>
         ${this.localize("logs.scroll_down_button")}
-        <ha-svg-icon
+        <ha-svg-icon .path=${mdiArrowCollapseDown} slot="end"></ha-svg-icon>
-          .path=${mdiArrowCollapseDown}
-          slot="trailingIcon"
-        ></ha-svg-icon>
       </ha-button>
     `;
   }

src/components/ha-button.ts

@@ -32,7 +32,8 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
  * @attr {("small"|"medium")} size - Sets the button size.
  * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
  * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
- * @attr {boolean} hideContent - Hides the button content (for overlays).
+ * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
+ * @attr {boolean} disabled - Disables the button and prevents user interaction.
  */
 @customElement("ha-button")
 export class HaButton extends Button {

src/components/ha-picture-upload.ts

@@ -92,11 +92,12 @@ export class HaPictureUpload extends LitElement {
         />
         <div>
           <ha-button
+            appearance="plain"
+            size="small"
+            variant="danger"
             @click=${this._handleChangeClick}
-            .label=${this.hass.localize(
-              "ui.components.picture-upload.clear_picture"
-            )}
           >
+            ${this.hass.localize("ui.components.picture-upload.clear_picture")}
           </ha-button>
         </div>
       </div>

src/components/ha-qr-scanner.ts

@@ -103,7 +103,7 @@ class HaQrScanner extends LitElement {
         >
           ${this._error || this._warning}
           ${this._error
-            ? html` <ha-button @click=${this._retry} slot="action">
+            ? html`<ha-button @click=${this._retry} slot="action">
                 ${this.hass.localize("ui.components.qr-scanner.retry")}
               </ha-button>`
             : nothing}

src/components/ha-yaml-editor.ts

@@ -130,7 +130,7 @@ export class HaYamlEditor extends LitElement {
             <div class="card-actions">
               ${this.copyClipboard
                 ? html`
-                    <ha-button @click=${this._copyYaml}>
+                    <ha-button appearance="plain" @click=${this._copyYaml}>
                       ${this.hass.localize(
                         "ui.components.yaml-editor.copy_to_clipboard"
                       )}

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

@@ -119,15 +119,15 @@ class DialogMediaManage extends LitElement {
                   class="danger"
                   slot="navigationIcon"
                   .disabled=${this._deleting}
-                  .label=${this.hass.localize(
+                  @click=${this._handleDelete}
+                >
+                  <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
+                  ${this.hass.localize(
                     `ui.components.media-browser.file_management.${
                       this._deleting ? "deleting" : "delete"
                     }`,
                     { count: this._selected.size }
                   )}
-                  @click=${this._handleDelete}
-                >
-                  <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
                 </ha-button>
 
                 ${this._deleting
@@ -135,15 +135,15 @@ class DialogMediaManage extends LitElement {
                   : html`
                       <ha-button
                         slot="actionItems"
-                        .label=${this.hass.localize(
-                          `ui.components.media-browser.file_management.deselect_all`
-                        )}
                         @click=${this._handleDeselectAll}
                       >
                         <ha-svg-icon
                           .path=${mdiClose}
-                          slot="icon"
+                          slot="start"
                         ></ha-svg-icon>
+                        ${this.hass.localize(
+                          `ui.components.media-browser.file_management.deselect_all`
+                        )}
                       </ha-button>
                     `}
               `}
@@ -331,20 +331,10 @@ class DialogMediaManage extends LitElement {
           --mdc-theme-primary: var(--error-color);
         }
 
-        ha-svg-icon[slot="icon"] {
-          vertical-align: middle;
-        }
-
         ha-tip {
           margin: 16px;
         }
 
-        ha-svg-icon[slot="icon"] {
-          margin-inline-start: 0px !important;
-          margin-inline-end: 8px !important;
-          direction: var(--direction);
-        }
-
         .refresh {
           display: flex;
           height: 200px;

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

@@ -1,5 +1,5 @@
 import { mdiFolderEdit } 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";
@@ -53,18 +53,6 @@ class MediaManageButton extends LitElement {
       onClose: () => fireEvent(this, "media-refresh"),
     });
   }
-
-  static styles = css`
-    ha-svg-icon[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-flow/step-flow-form.ts

@@ -104,23 +104,13 @@ class StepFlowForm extends LitElement {
           </div>`
         : nothing}
       <div class="buttons">
-        ${this._loading
+        <ha-button @click=${this._submitStep} .loading=${this._loading}>
-          ? html`
-              <div class="submit-spinner">
-                <ha-spinner size="small"></ha-spinner>
-              </div>
-            `
-          : html`
-              <div>
-                <ha-button @click=${this._submitStep}>
           ${this.flowConfig.renderShowFormStepSubmitButton(
             this.hass,
             this.step
           )}
         </ha-button>
       </div>
-            `}
-      </div>
     `;
   }
 
@@ -304,15 +294,6 @@ class StepFlowForm extends LitElement {
           color: red;
         }
 
-        .submit-spinner {
-          height: 36px;
-          display: flex;
-          align-items: center;
-          margin-right: 16px;
-          margin-inline-end: 16px;
-          margin-inline-start: initial;
-        }
-
         ha-alert,
         ha-form {
           margin-top: 24px;
@@ -320,7 +301,7 @@ class StepFlowForm extends LitElement {
         }
 
         .buttons {
-          padding: 8px;
+          padding: 16px;
         }
       `,
     ];

src/dialogs/config-flow/styles.ts

@@ -34,7 +34,7 @@ export const configFlowContentStyles = css`
 
   .buttons {
     position: relative;
-    padding: 8px 16px 8px 24px;
+    padding: 16px;
     margin: 8px 0 0;
     color: var(--primary-color);
     display: flex;

src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts

@@ -228,7 +228,7 @@ class DialogLightColorFavorite extends LitElement {
           </div>
         </div>
         <div slot="actions">
-          <ha-button @click=${this._cancelDialog}>
+          <ha-button appearance="plain" @click=${this._cancelDialog}>
             ${this.hass.localize("ui.common.cancel")}
           </ha-button>
           <ha-button @click=${this._save} .disabled=${!this._color}

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

@@ -1,13 +1,13 @@
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
+import { slugify } from "../../../common/string/slugify";
+import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-camera-stream";
 import type { CameraEntity } from "../../../data/camera";
-import type { HomeAssistant } from "../../../types";
-import "../../../components/buttons/ha-progress-button";
 import { UNAVAILABLE } from "../../../data/entity";
+import type { HomeAssistant } from "../../../types";
 import { fileDownload } from "../../../util/file_download";
 import { showToast } from "../../../util/toast";
-import { slugify } from "../../../common/string/slugify";
 
 class MoreInfoCamera extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -46,6 +46,7 @@ class MoreInfoCamera extends LitElement {
           @click=${this._downloadSnapshot}
           .progress=${this._waiting}
           .disabled=${this.stateObj.state === UNAVAILABLE}
+          appearance="filled"
         >
           ${this.hass.localize(
             "ui.dialogs.more_info_control.camera.download_snapshot"
@@ -104,7 +105,7 @@ class MoreInfoCamera extends LitElement {
       flex-wrap: wrap;
       justify-content: flex-end;
       box-sizing: border-box;
-      padding: 12px;
+      padding: 16px;
       z-index: 1;
       gap: 8px;
     }

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

@@ -51,7 +51,11 @@ class MoreInfoSiren extends LitElement {
           .iconPathOff=${mdiVolumeOff}
         ></ha-state-control-toggle>
         ${allowAdvanced
-          ? html`<ha-button @click=${this._showAdvancedControlsDialog}>
+          ? html`<ha-button
+              appearance="plain"
+              size="small"
+              @click=${this._showAdvancedControlsDialog}
+            >
               ${this.hass.localize("ui.components.siren.advanced_controls")}
             </ha-button>`
           : nothing}

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

@@ -508,7 +508,7 @@ class MoreInfoUpdate extends LitElement {
       flex-wrap: wrap;
       justify-content: flex-end;
       box-sizing: border-box;
-      padding: 12px;
+      padding: 16px;
       z-index: 1;
       gap: 8px;
     }

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

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

src/dialogs/update_backup/dialog-update-backup.ts

@@ -32,7 +32,7 @@ class DialogBox extends LitElement {
         )}
       >
         <p>${this.hass.localize("ui.dialogs.update_backup.text")}</p>
-        <ha-button @click=${this._no} slot="secondaryAction">
+        <ha-button appearance="plain" @click=${this._no} slot="secondaryAction">
           ${this.hass!.localize("ui.common.no")}
         </ha-button>
         <ha-button @click=${this._yes} slot="primaryAction">

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

@@ -76,7 +76,6 @@ export class CloudStepSignin extends LitElement {
       </div>
       <div class="footer">
         <ha-button
-          unelevated
           @click=${this._handleLogin}
           .disabled=${this._requestInProgress}
           >${this.hass.localize(

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

@@ -90,11 +90,11 @@ export class CloudStepSignup extends LitElement {
           ? html`<ha-button
                 @click=${this._handleResendVerifyEmail}
                 .disabled=${this._requestInProgress}
+                appearance="plain"
                 >${this.hass.localize(
                   "ui.panel.config.cloud.register.resend_confirm_email"
                 )}</ha-button
               ><ha-button
-                unelevated
                 @click=${this._login}
                 .disabled=${this._requestInProgress}
                 >${this.hass.localize(
@@ -104,12 +104,12 @@ export class CloudStepSignup extends LitElement {
           : html`<ha-button
                 @click=${this._signIn}
                 .disabled=${this._requestInProgress}
+                appearance="plain"
                 >${this.hass.localize(
                   "ui.panel.config.cloud.login.sign_in"
                 )}</ha-button
               >
               <ha-button
-                unelevated
                 @click=${this._handleRegister}
                 .disabled=${this._requestInProgress}
                 >${this.hass.localize("ui.common.next")}</ha-button

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

@@ -51,16 +51,16 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
               )}
             </p>
             <div class="footer">
-              <a
+              <ha-button
+                appearance="plain"
                 href=${documentationUrl(
                   this.hass,
                   "/voice_control/troubleshooting/#i-dont-get-a-voice-response"
                 )}
-                ><ha-button
+              >
                 >${this.hass.localize(
                   "ui.panel.config.voice_assistants.satellite_wizard.check.help"
                 )}</ha-button
-                ></a
               >
               <ha-button @click=${this._testConnection}
                 >${this.hass.localize(

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

@@ -80,7 +80,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
               ${this._detailState || "Installation can take several minutes"}
             </p>`
         : this._state === "ERROR"
-          ? html` <img
+          ? html`<img
                 src="/static/images/voice-assistant/error.png"
                 alt="Casita Home Assistant error logo"
               />
@@ -95,24 +95,27 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
                   "ui.panel.config.voice_assistants.satellite_wizard.local.failed_secondary"
                 )}
               </p>
-              <ha-button @click=${this._prevStep}
+              <ha-button
+                appearance="plain"
+                size="small"
+                @click=${this._prevStep}
                 >${this.hass.localize("ui.common.back")}</ha-button
               >
-              <a
+              <ha-button
                 href=${documentationUrl(
                   this.hass,
                   "/voice_control/voice_remote_local_assistant/"
                 )}
                 target="_blank"
                 rel="noreferrer noopener"
+                size="small"
+                appearance="plain"
               >
-                <ha-button>
+                <ha-svg-icon .path=${mdiOpenInNew} slot="start"></ha-svg-icon>
-                  <ha-svg-icon .path=${mdiOpenInNew} slot="icon"></ha-svg-icon>
                 ${this.hass.localize(
                   "ui.panel.config.common.learn_more"
                 )}</ha-button
-                >
+              >`
-              </a>`
           : this._state === "NOT_SUPPORTED"
             ? html`<img
                   src="/static/images/voice-assistant/error.png"
@@ -128,27 +131,27 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
                     "ui.panel.config.voice_assistants.satellite_wizard.local.not_supported_secondary"
                   )}
                 </p>
-                <ha-button @click=${this._prevStep}
+                <ha-button
+                  appearance="plain"
+                  size="small"
+                  @click=${this._prevStep}
                   >${this.hass.localize("ui.common.back")}</ha-button
                 >
-                <a
+                <ha-button
                   href=${documentationUrl(
                     this.hass,
                     "/voice_control/voice_remote_local_assistant/"
                   )}
                   target="_blank"
                   rel="noreferrer noopener"
+                  appearance="plain"
+                  size="small"
                 >
-                  <ha-button>
+                  <ha-svg-icon .path=${mdiOpenInNew} slot="start"></ha-svg-icon>
-                    <ha-svg-icon
-                      .path=${mdiOpenInNew}
-                      slot="icon"
-                    ></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.common.learn_more"
                   )}</ha-button
-                  >
+                >`
-                </a>`
             : nothing}
     </div>`;
   }

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

@@ -235,10 +235,7 @@ export class HaVoiceAssistantSetupStepPipeline extends LitElement {
           : nothing}
       </div>
       <div class="footer">
-        <ha-button
+        <ha-button @click=${this._createPipeline} .disabled=${!this._value}
-          @click=${this._createPipeline}
-          unelevated
-          .disabled=${!this._value}
           >${this.hass.localize("ui.common.next")}</ha-button
         >
       </div>`;

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

@@ -126,8 +126,15 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
                       </ha-list-item>`
                   )}
                 </ha-select>
-                <ha-button @click=${this._testWakeWord}>
+                <ha-button
-                  <ha-svg-icon slot="icon" .path=${mdiMicrophone}></ha-svg-icon>
+                  appearance="plain"
+                  size="small"
+                  @click=${this._testWakeWord}
+                >
+                  <ha-svg-icon
+                    slot="start"
+                    .path=${mdiMicrophone}
+                  ></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.voice_assistants.satellite_wizard.success.test_wakeword"
                   )}
@@ -151,8 +158,12 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
                       </ha-list-item>`
                   )}
                 </ha-select>
-                <ha-button @click=${this._openPipeline}>
+                <ha-button
-                  <ha-svg-icon slot="icon" .path=${mdiCog}></ha-svg-icon>
+                  appearance="plain"
+                  size="small"
+                  @click=${this._openPipeline}
+                >
+                  <ha-svg-icon slot="start" .path=${mdiCog}></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.voice_assistants.satellite_wizard.success.edit_pipeline"
                   )}
@@ -169,8 +180,12 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
                   @value-changed=${this._voicePicked}
                   @closed=${stopPropagation}
                 ></ha-tts-voice-picker>
-                <ha-button @click=${this._testTts}>
+                <ha-button
-                  <ha-svg-icon slot="icon" .path=${mdiPlay}></ha-svg-icon>
+                  appearance="plain"
+                  size="small"
+                  @click=${this._testTts}
+                >
+                  <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.config.voice_assistants.satellite_wizard.success.try_tts"
                   )}

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-wake-word.ts

@@ -148,7 +148,10 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
       ${this.assistConfiguration &&
       this.assistConfiguration.available_wake_words.length > 1
         ? html`<div class="footer centered">
-            <ha-button @click=${this._changeWakeWord}
+            <ha-button
+              appearance="plain"
+              size="small"
+              @click=${this._changeWakeWord}
               >${this.hass.localize(
                 "ui.panel.config.voice_assistants.satellite_wizard.wake_word.change_wake_word"
               )}</ha-button

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

@@ -271,7 +271,6 @@ export class HaVoiceCommandDialog extends LitElement {
           margin-inline-start: -8px;
         }
         ha-button-menu ha-button {
-          --ha-font-size-l: var(--ha-font-size-m);
           --ha-button-height: 20px;
         }
         ha-button-menu ha-button::part(base) {

src/layouts/ha-init-page.ts

@@ -22,7 +22,9 @@ class HaInitPage extends LitElement {
           <p class="retry-text">
             Retrying in ${this._retryInSeconds} seconds...
           </p>
-          <ha-button @click=${this._retry}>Retry now</ha-button>
+          <ha-button size="small" appearance="plain" @click=${this._retry}
+            >Retry now</ha-button
+          >
           ${location.host.includes("ui.nabu.casa")
             ? html`
                 <p>

src/managers/notification-manager.ts

@@ -69,10 +69,13 @@ class NotificationManager extends LitElement {
         ${this._parameters?.action
           ? html`
               <ha-button
+                appearance="plain"
+                size="small"
                 slot="action"
-                .label=${this._parameters?.action.text}
                 @click=${this._buttonClicked}
-              ></ha-button>
+              >
+                ${this._parameters?.action.text}
+              </ha-button>
             `
           : nothing}
         ${this._parameters?.dismissable

src/onboarding/restore-backup/onboarding-restore-backup-no-cloud-backup.ts

@@ -32,17 +32,16 @@ class OnboardingRestoreBackupNoCloudBackup extends LitElement {
         <ha-button @click=${this._signOut}>
           ${this.localize("ui.panel.page-onboarding.restore.ha-cloud.sign_out")}
         </ha-button>
-        <a
+        <ha-button
           href="https://www.nabucasa.com/config/backups/"
           target="_blank"
           rel="noreferrer noopener"
+          appearance="plain"
         >
-          <ha-button>
           ${this.localize(
             "ui.panel.page-onboarding.restore.ha-cloud.learn_more"
           )}
         </ha-button>
-        </a>
       </div>
     `;
   }

src/onboarding/restore-backup/onboarding-restore-backup-restore.ts

@@ -131,18 +131,17 @@ class OnboardingRestoreBackupRestore extends LitElement {
             ${this.localize(
               "ui.panel.page-onboarding.restore.details.addons_unsupported"
             )}
-            <a
+            <ha-button
               slot="action"
               href="https://www.home-assistant.io/installation/#advanced-installation-methods"
               target="_blank"
               rel="noreferrer noopener"
+              size="small"
             >
-              <ha-button
+              ${this.localize(
-                >${this.localize(
                 "ui.panel.page-onboarding.restore.ha-cloud.learn_more"
               )}</ha-button
             >
-            </a>
           </ha-alert>`
         : nothing}
       ${!onlyHomeAssistantBackup
@@ -191,14 +190,13 @@ class OnboardingRestoreBackupRestore extends LitElement {
 
       <div class="actions${this.mode === "cloud" ? " cloud" : ""}">
         ${this.mode === "cloud"
-          ? html`<ha-button @click=${this._signOut}>
+          ? html`<ha-button appearance="plain" @click=${this._signOut}>
               ${this.localize(
                 "ui.panel.page-onboarding.restore.ha-cloud.sign_out"
               )}
             </ha-button>`
           : nothing}
         <ha-progress-button
-          unelevated
           .progress=${this._loading}
           .disabled=${this._loading ||
           (backupProtected && this._encryptionKey === "") ||

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

@@ -40,7 +40,11 @@ class ConfirmEventDialogBox extends LitElement {
         <div>
           <p>${this._params.text}</p>
         </div>
-        <ha-button @click=${this._dismiss} slot="secondaryAction">
+        <ha-button
+          appearance="plain"
+          @click=${this._dismiss}
+          slot="secondaryAction"
+        >
           ${this.hass.localize("ui.common.cancel")}
         </ha-button>
         <ha-button

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

@@ -135,10 +135,7 @@ class PanelCalendar extends LitElement {
             >
               <ha-button slot="trigger">
                 ${this.hass.localize("ui.components.calendar.my_calendars")}
-                <ha-svg-icon
+                <ha-svg-icon slot="end" .path=${mdiChevronDown}></ha-svg-icon>
-                  slot="trailingIcon"
-                  .path=${mdiChevronDown}
-                ></ha-svg-icon>
               </ha-button>
               ${calendarItems}
               ${this.hass.user?.is_admin
@@ -303,25 +300,7 @@ class PanelCalendar extends LitElement {
           --calendar-border-width: 1px 0;
         }
         ha-button-menu ha-button {
-          --mdc-theme-primary: currentColor;
+          --ha-font-size-m: var(--ha-font-size-l);
-          --mdc-typography-button-text-transform: none;
-          --mdc-typography-button-font-size: var(
-            --mdc-typography-headline6-font-size,
-            var(--ha-font-size-l)
-          );
-          --mdc-typography-button-font-weight: var(
-            --mdc-typography-headline6-font-weight,
-            var(--ha-font-weight-medium)
-          );
-          --mdc-typography-button-letter-spacing: var(
-            --mdc-typography-headline6-letter-spacing,
-            0.0125em
-          );
-          --mdc-typography-button-line-height: var(
-            --mdc-typography-headline6-line-height,
-            var(--ha-line-height-expanded)
-          );
-          --button-height: 40px;
         }
         :host([mobile]) .lists {
           --mdc-menu-min-width: 100vw;

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -220,32 +220,25 @@ export class DialogAddApplicationCredential extends LitElement {
             helperPersistent
           ></ha-password-field>
         </div>
-        ${this._loading
+
-          ? html`
-              <div slot="primaryAction" class="submit-spinner">
-                <ha-spinner></ha-spinner>
-              </div>
-            `
-          : html`
         <ha-button
           appearance="plain"
           slot="secondaryAction"
           @click=${this._abortDialog}
+          .disabled=${this._loading}
         >
           ${this.hass.localize("ui.common.cancel")}
         </ha-button>
         <ha-button
           slot="primaryAction"
-                .disabled=${!this._domain ||
+          .disabled=${!this._domain || !this._clientId || !this._clientSecret}
-                !this._clientId ||
-                !this._clientSecret}
           @click=${this._addApplicationCredential}
+          .loading=${this._loading}
         >
           ${this.hass.localize(
             "ui.panel.config.application_credentials.editor.add"
           )}
         </ha-button>
-            `}
       </ha-dialog>
     `;
   }

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

@@ -30,6 +30,8 @@ export default class HaAutomationAction extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public root = false;
+
   @property({ attribute: false }) public actions!: Action[];
 
   @property({ attribute: false }) public highlightedActions?: Action[];
@@ -110,6 +112,8 @@ export default class HaAutomationAction extends LitElement {
             <ha-button
               .disabled=${this.disabled}
               @click=${this._addActionDialog}
+              .appearance=${this.root ? "accent" : "filled"}
+              .size=${this.root ? "medium" : "small"}
             >
               <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
               ${this.hass.localize(
@@ -117,9 +121,10 @@ export default class HaAutomationAction extends LitElement {
               )}
             </ha-button>
             <ha-button
-              appearance="plain"
               .disabled=${this.disabled}
               @click=${this._addActionBuildingBlockDialog}
+              appearance="plain"
+              .size=${this.root ? "medium" : "small"}
             >
               <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
               ${this.hass.localize(

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

@@ -34,6 +34,8 @@ export default class HaAutomationCondition extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public root = false;
+
   @state() private _showReorder = false;
 
   @state()
@@ -159,6 +161,8 @@ export default class HaAutomationCondition extends LitElement {
             <ha-button
               .disabled=${this.disabled}
               @click=${this._addConditionDialog}
+              .appearance=${this.root ? "accent" : "filled"}
+              .size=${this.root ? "medium" : "small"}
             >
               <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
               ${this.hass.localize(
@@ -168,6 +172,7 @@ export default class HaAutomationCondition extends LitElement {
             <ha-button
               .disabled=${this.disabled}
               appearance="plain"
+              .size=${this.root ? "medium" : "small"}
               @click=${this._addConditionBuildingBlockDialog}
             >
               <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>

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

@@ -228,6 +228,7 @@ export class HaManualAutomationEditor extends LitElement {
         @value-changed=${this._conditionChanged}
         .hass=${this.hass}
         .disabled=${this.disabled}
+        root
       ></ha-automation-condition>
 
       <div class="header">
@@ -269,6 +270,7 @@ export class HaManualAutomationEditor extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .disabled=${this.disabled}
+        root
       ></ha-automation-action>
     `;
   }

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

@@ -100,14 +100,14 @@ export default class HaAutomationOption extends LitElement {
           )}
           <div class="buttons">
             <ha-button
-              outlined
+              appearance="filled"
               .disabled=${this.disabled}
-              .label=${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.type.choose.add_option"
-              )}
               @click=${this._addOption}
             >
-              <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+              <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.choose.add_option"
+              )}
             </ha-button>
           </div>
         </div>

src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts

@@ -58,7 +58,7 @@ class DialogPasteReplace extends LitElement implements HassDialog {
         ></ha-yaml-editor>
 
         <div slot="primaryAction">
-          <ha-button @click=${this._handleAppend}>
+          <ha-button appearance="plain" @click=${this._handleAppend}>
             ${this.hass.localize("ui.common.append")}
           </ha-button>
           <ha-button @click=${this._handleReplace}>
@@ -89,6 +89,10 @@ class DialogPasteReplace extends LitElement implements HassDialog {
           font-size: inherit;
           font-weight: inherit;
         }
+        div[slot="primaryAction"] {
+          display: flex;
+          gap: 8px;
+        }
       `,
     ];
   }

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

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

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

@@ -375,8 +375,13 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
                   "ui.panel.config.backup.encryption_key.download_emergency_kit_description"
                 )}
               </span>
-              <ha-button slot="end" @click=${this._downloadKey}>
+              <ha-button
-                <ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
+                size="small"
+                appearance="plain"
+                slot="end"
+                @click=${this._downloadKey}
+              >
+                <ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
                 ${this.hass.localize(
                   "ui.panel.config.backup.encryption_key.download_emergency_kit_action"
                 )}

src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts

@@ -128,7 +128,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
                   <ha-button
                     @click=${this._submit}
                     .disabled=${!this._newEncryptionKey}
-                    class="danger"
+                    variant="danger"
                   >
                     ${this.hass.localize(
                       "ui.panel.config.backup.dialogs.change_encryption_key.actions.change"
@@ -176,7 +176,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
                 )}
               </span>
               <ha-button slot="end" @click=${this._downloadOld}>
-                <ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
+                <ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
                 ${this.hass.localize(
                   "ui.panel.config.backup.encryption_key.download_old_emergency_kit_action"
                 )}
@@ -211,7 +211,7 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
                 )}
               </span>
               <ha-button slot="end" @click=${this._downloadNew}>
-                <ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
+                <ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
                 ${this.hass.localize(
                   "ui.panel.config.backup.encryption_key.download_emergency_kit_action"
                 )}
@@ -297,9 +297,6 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
           --md-list-item-leading-space: 0;
           --md-list-item-trailing-space: 0;
         }
-        ha-button.danger {
-          --mdc-theme-primary: var(--error-color);
-        }
         .encryption-key {
           border: 1px solid var(--divider-color);
           background-color: var(--primary-background-color);

src/panels/config/backup/dialogs/dialog-download-decrypted-backup.ts

@@ -112,7 +112,7 @@ class DialogDownloadDecryptedBackup extends LitElement implements HassDialog {
             : nothing}
         </div>
         <div slot="actions">
-          <ha-button @click=${this._cancel}>
+          <ha-button appearance="plain" @click=${this._cancel}>
             ${this.hass.localize("ui.common.cancel")}
           </ha-button>
 

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

@@ -227,7 +227,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog {
 
   private _renderConfirmActions() {
     return html`
-      <ha-button @click=${this.closeDialog}>
+      <ha-button appearance="plain" @click=${this.closeDialog}>
         ${this.hass.localize("ui.common.cancel")}
       </ha-button>
       <ha-button @click=${this._restoreBackup} variant="danger">

src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts

@@ -151,8 +151,13 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
                   "ui.panel.config.backup.encryption_key.download_emergency_kit_description"
                 )}
               </span>
-              <ha-button slot="end" @click=${this._download}>
+              <ha-button
-                <ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
+                size="small"
+                appearance="plain"
+                slot="end"
+                @click=${this._download}
+              >
+                <ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
                 ${this.hass.localize(
                   "ui.panel.config.backup.encryption_key.download_emergency_kit_action"
                 )}

src/panels/config/backup/dialogs/dialog-show-backup-encryption-key.ts

@@ -87,8 +87,13 @@ class DialogShowBackupEncryptionKey extends LitElement implements HassDialog {
                   "ui.panel.config.backup.encryption_key.download_emergency_kit_description"
                 )}
               </span>
-              <ha-button slot="end" @click=${this._download}>
+              <ha-button
-                <ha-svg-icon .path=${mdiDownload} slot="icon"></ha-svg-icon>
+                size="small"
+                appearance="plain"
+                slot="end"
+                @click=${this._download}
+              >
+                <ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
                 ${this.hass.localize(
                   "ui.panel.config.backup.encryption_key.download_emergency_kit_action"
                 )}

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

@@ -113,7 +113,10 @@ export class DialogUploadBackup
           ></ha-file-upload>
         </div>
         <div slot="actions">
-          <ha-button @click=${this.closeDialog} .disabled=${this._uploading}
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            .disabled=${this._uploading}
             >${this.hass.localize("ui.common.cancel")}</ha-button
           >
           <ha-button

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

@@ -417,7 +417,11 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
         <div slot="selection-bar">
           ${!this.narrow
             ? html`
-                <ha-button @click=${this._deleteSelected} class="warning">
+                <ha-button
+                  appearance="plain"
+                  @click=${this._deleteSelected}
+                  variant="danger"
+                >
                   ${this.hass.localize(
                     "ui.panel.config.backup.backups.delete_selected"
                   )}

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

@@ -158,18 +158,18 @@ class HaConfigBackupDetails extends LitElement {
                                     "ui.panel.config.backup.location.encryption.location_encrypted_cloud_description"
                                   )}
                                 </span>
-                                <a
+                                <ha-button
                                   href="https://www.nabucasa.com/config/backups/"
                                   target="_blank"
                                   slot="end"
                                   rel="noreferrer noopener"
+                                  appearance="plain"
+                                  size="small"
                                 >
-                                  <ha-button>
                                   ${this.hass.localize(
                                     "ui.panel.config.backup.location.encryption.location_encrypted_cloud_learn_more"
                                   )}
                                 </ha-button>
-                                </a>
                               </ha-md-list-item>
                             `
                           : encrypted

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

@@ -187,7 +187,11 @@ export class CloudRemotePref extends LitElement {
                     )
                   : nothing}</span
               >
-              <ha-button @click=${this._openCertInfo}>
+              <ha-button
+                appearance="plain"
+                size="small"
+                @click=${this._openCertInfo}
+              >
                 ${this.hass.localize(
                   "ui.panel.config.cloud.account.remote.more_info"
                 )}

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

@@ -126,7 +126,7 @@ export class CloudTTSPref extends LitElement {
                 `}
           </div>
           <div class="flex"></div>
-          <ha-button @click=${this._openTryDialog}>
+          <ha-button appearance="plain" @click=${this._openTryDialog}>
             ${this.hass.localize("ui.panel.config.cloud.account.tts.try")}
           </ha-button>
         </div>

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

@@ -77,7 +77,9 @@ export class DialogSupportPackage extends LitElement {
           </ha-alert>
           <hr />
           <div class="actions">
-            <ha-button @click=${this.closeDialog}>Close</ha-button>
+            <ha-button appearance="plain" @click=${this.closeDialog}
+              >Close</ha-button
+            >
             <ha-button @click=${this._download}>Download</ha-button>
           </div>
         </div>

src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -202,7 +202,7 @@ export class EntitySettingsHelperTab extends LitElement {
           box-sizing: border-box;
           display: flex;
           justify-content: space-between;
-          padding: 0 24px 24px 24px;
+          padding: 16px;
           background-color: var(--mdc-theme-surface, #fff);
         }
         .error {

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

@@ -249,9 +249,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         .buttons {
           box-sizing: border-box;
           display: flex;
-          padding: 8px;
+          padding: 16px;
           justify-content: space-between;
-          padding-bottom: max(var(--safe-area-inset-bottom), 8px);
+          padding-bottom: max(var(--safe-area-inset-bottom), 16px);
           background-color: var(--mdc-theme-surface, #fff);
           border-top: 1px solid var(--divider-color);
           position: sticky;

src/panels/config/helpers/forms/dialog-schedule-block-info.ts

@@ -92,8 +92,9 @@ class DialogScheduleBlockInfo extends LitElement {
         </div>
         <ha-button
           slot="secondaryAction"
-          class="warning"
           @click=${this._deleteBlock}
+          appearance="plain"
+          variant="danger"
         >
           ${this.hass!.localize("ui.common.delete")}
         </ha-button>

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

@@ -145,7 +145,7 @@ class HaInputSelectForm extends LitElement {
             )}
             @keydown=${this._handleKeyAdd}
           ></ha-textfield>
-          <ha-button @click=${this._addOption}
+          <ha-button size="small" appearance="plain" @click=${this._addOption}
             >${this.hass!.localize(
               "ui.dialogs.helper_settings.input_select.add"
             )}</ha-button

src/panels/config/integrations/ha-config-entry-row.ts

@@ -207,7 +207,7 @@ class HaConfigEntryRow extends LitElement {
             : nothing}
         </div>
         ${item.disabled_by === "user"
-          ? html`<ha-button unelevated slot="end" @click=${this._handleEnable}>
+          ? html`<ha-button slot="end" @click=${this._handleEnable}>
               ${this.hass.localize("ui.common.enable")}
             </ha-button>`
           : configPanel &&

src/panels/config/integrations/ha-disabled-config-entry-card.ts

@@ -45,10 +45,9 @@ export class HaDisabledConfigEntryCard extends LitElement {
         >
           <ha-icon-button .path=${mdiCog}></ha-icon-button>
         </a>
-        <ha-button
+        <ha-button @click=${this._handleEnable} appearance="filled">
-          @click=${this._handleEnable}
+          ${this.hass.localize("ui.common.enable")}
-          .label=${this.hass.localize("ui.common.enable")}
+        </ha-button>
-        ></ha-button>
       </ha-integration-action-card>
     `;
   }

src/panels/config/integrations/ha-ignored-config-entry-card.ts

@@ -34,12 +34,11 @@ export class HaIgnoredConfigEntryCard extends LitElement {
             this.entry.localized_domain_name
           : this.entry.title}
       >
-        <ha-button
+        <ha-button appearance="plain" @click=${this._removeIgnoredIntegration}>
-          @click=${this._removeIgnoredIntegration}
+          ${this.hass.localize(
-          .label=${this.hass.localize(
             "ui.panel.config.integrations.ignore.stop_ignore"
           )}
-        ></ha-button>
+        </ha-button>
       </ha-integration-action-card>
     `;
   }

src/panels/config/integrations/ha-integration-card.ts

@@ -112,7 +112,8 @@ export class HaIntegrationCard extends LitElement {
     return html`
       <div class="card-actions">
         ${devices.length > 0
-          ? html`<a
+          ? html`<ha-button
+              appearance="plain"
               href=${devices.length === 1 &&
               // Always link to device page for protocol integrations to show Add Device button
               // @ts-expect-error
@@ -120,31 +121,28 @@ export class HaIntegrationCard extends LitElement {
                 ? `/config/devices/device/${devices[0].id}`
                 : `/config/devices/dashboard?historyBack=1&domain=${this.domain}`}
             >
-              <ha-button appearance="plain">
               ${this.hass.localize(
                 `ui.panel.config.integrations.config_entry.${
                   services ? "services" : "devices"
                 }`,
                 { count: devices.length }
               )}
-              </ha-button>
+            </ha-button>`
-            </a>`
           : entitiesCount > 0
-            ? html`<a
+            ? html`<ha-button
+                appearance="plain"
                 href=${`/config/entities?historyBack=1&domain=${this.domain}`}
               >
-                <ha-button appearance="plain">
                 ${this.hass.localize(
                   `ui.panel.config.integrations.config_entry.entities`,
                   { count: entitiesCount }
                 )}
-                </ha-button>
+              </ha-button>`
-              </a>`
             : this.items.find((itm) => itm.source !== "yaml")
-              ? html`<a
+              ? html`<ha-button
+                  appearance="plain"
                   href=${`/config/integrations/integration/${this.domain}`}
                 >
-                  <ha-button appearance="plain">
                   ${this.hass.localize(
                     `ui.panel.config.integrations.config_entry.entries`,
                     {
@@ -152,8 +150,7 @@ export class HaIntegrationCard extends LitElement {
                         .length,
                     }
                   )}
-                  </ha-button>
+                </ha-button>`
-                </a>`
               : html`<div class="spacer"></div>`}
         <div class="icons">
           ${this.manifest && !this.manifest.is_built_in

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

@@ -114,7 +114,11 @@ class DialogSSDPDiscoveryInfo 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.ssdp.copy_to_clipboard")}
         </ha-button>
       </ha-dialog>

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

@@ -160,7 +160,11 @@ class DialogZHAReconfigureDevice extends LitElement {
               <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
               </ha-button>
-              <ha-button slot="secondaryAction" @click=${this._toggleDetails}>
+              <ha-button
+                appearance="plain"
+                slot="secondaryAction"
+                @click=${this._toggleDetails}
+              >
                 ${this._showDetails
                   ? this.hass.localize(
                       `ui.dialogs.zha_reconfigure_device.button_hide`
@@ -189,7 +193,11 @@ class DialogZHAReconfigureDevice extends LitElement {
               <ha-button slot="primaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.close")}
               </ha-button>
-              <ha-button slot="secondaryAction" @click=${this._toggleDetails}>
+              <ha-button
+                appearance="plain"
+                slot="secondaryAction"
+                @click=${this._toggleDetails}
+              >
                 ${this._showDetails
                   ? this.hass.localize(
                       `ui.dialogs.zha_reconfigure_device.button_hide`

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

@@ -176,7 +176,7 @@ export class ZHAAddGroupPage extends LitElement {
         }
         .buttons {
           align-items: flex-end;
-          padding: 8px;
+          padding: 16px;
         }
         .buttons .warning {
           --mdc-theme-primary: var(--error-color);

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

@@ -305,7 +305,7 @@ export class ZHAGroupPage extends LitElement {
         }
         .buttons {
           align-items: flex-end;
-          padding: 8px;
+          padding: 16px;
         }
         .buttons .warning {
           --mdc-theme-primary: var(--error-color);

src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-failed.ts

@@ -33,13 +33,11 @@ export class ZWaveJsAddNodeFailed extends LitElement {
           </div>`
         : nothing}
       ${this.device?.id
-        ? html`<a href=${`/config/devices/device/${this.device.id}`}>
+        ? html`<ha-button href=${`/config/devices/device/${this.device.id}`}>
-            <ha-button>
             ${this.hass.localize(
               "ui.panel.config.zwave_js.add_node.view_device"
             )}
-            </ha-button>
+          </ha-button>`
-          </a>`
         : nothing}
     `;
   }

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

@@ -219,7 +219,11 @@ class DialogZWaveJSRemoveNode extends LitElement {
 
     if (this._step === "start_removal") {
       return html`
-        <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
@@ -234,7 +238,11 @@ class DialogZWaveJSRemoveNode extends LitElement {
 
     if (this._step === "start_exclusion") {
       return html`
-        <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

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts

@@ -92,12 +92,12 @@ class ZWaveJSCustomParam extends LitElement {
       </div>
       <div class="custom-config-buttons">
         ${this._isLoading ? html`<ha-spinner></ha-spinner>` : nothing}
-        <ha-button @click=${this._getCustomConfigValue}>
+        <ha-button appearance="plain" @click=${this._getCustomConfigValue}>
           ${this.hass.localize(
             "ui.panel.config.zwave_js.node_config.get_value"
           )}
         </ha-button>
-        <ha-button @click=${this._setCustomConfigValue}>
+        <ha-button appearance="plain" @click=${this._setCustomConfigValue}>
           ${this.hass.localize(
             "ui.panel.config.zwave_js.node_config.set_value"
           )}

src/panels/config/logs/dialog-download-logs.ts

@@ -94,7 +94,7 @@ class DownloadLogsDialog extends LitElement {
           </ha-md-select>
         </div>
         <div slot="actions">
-          <ha-button @click=${this.closeDialog}>
+          <ha-button appearance="plain" @click=${this.closeDialog}>
             ${this.hass.localize("ui.common.cancel")}
           </ha-button>
           <ha-button @click=${this._downloadLogs}>

src/panels/config/logs/error-log-card.ts

@@ -312,17 +312,16 @@ class ErrorLogCard extends LitElement {
                   !this._scrolledToBottomController.value) ||
                 false,
             })}"
+            size="small"
+            appearance="filled"
             @click=${this._scrollToBottom}
           >
             <ha-svg-icon
               .path=${mdiArrowCollapseDown}
-              slot="icon"
+              slot="start"
             ></ha-svg-icon>
             ${localize("ui.panel.config.logs.scroll_down_button")}
-            <ha-svg-icon
+            <ha-svg-icon .path=${mdiArrowCollapseDown} slot="end"></ha-svg-icon>
-              .path=${mdiArrowCollapseDown}
-              slot="trailingIcon"
-            ></ha-svg-icon>
           </ha-button>
           ${streaming && this._boot === 0 && !this._error
             ? html`<div class="live-indicator">
@@ -823,25 +822,15 @@ class ErrorLogCard extends LitElement {
     }
 
     .new-logs-indicator {
-      --mdc-theme-primary: var(--text-primary-color);
-
       overflow: hidden;
       position: absolute;
-      bottom: 0;
+      bottom: 4px;
-      left: 0;
-      right: 0;
       height: 0;
-      background-color: var(--primary-color);
-      border-radius: 8px;
-
       transition: height 0.4s ease-out;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
     }
 
     .new-logs-indicator.visible {
-      height: 24px;
+      height: 32px;
     }
 
     .error {

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

@@ -284,7 +284,7 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
               .url=${internalUrl}
               @click=${this._copyURL}
             >
-              <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
+              <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
               ${this.hass.localize("ui.panel.config.common.copy_link")}
             </ha-button>
           </div>

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

@@ -145,13 +145,12 @@ export class HassioNetwork extends LitElement {
                   class="scan"
                   @click=${this._scanForAP}
                   .disabled=${this._scanning}
+                  .loading=${this._scanning}
                 >
-                  ${this._scanning
+                  ${this.hass.localize(
-                    ? html`<ha-spinner size="small"> </ha-spinner>`
-                    : this.hass.localize(
                     "ui.panel.config.network.supervisor.scan_ap"
                   )}
-                  <ha-svg-icon slot="icon" .path=${mdiWifi}></ha-svg-icon>
+                  <ha-svg-icon slot="start" .path=${mdiWifi}></ha-svg-icon>
                 </ha-button>
                 ${this._accessPoints.length
                   ? html`
@@ -261,6 +260,9 @@ export class HassioNetwork extends LitElement {
           : nothing}
       </div>
       <div class="card-actions">
+        <ha-button appearance="plain" @click=${this._clear}>
+          ${this.hass.localize("ui.panel.config.network.supervisor.reset")}
+        </ha-button>
         <ha-button
           .loading=${this._processing}
           @click=${this._updateNetwork}
@@ -268,9 +270,6 @@ export class HassioNetwork extends LitElement {
         >
           ${this.hass.localize("ui.common.save")}
         </ha-button>
-        <ha-button appearance="plain" @click=${this._clear}>
-          ${this.hass.localize("ui.panel.config.network.supervisor.reset")}
-        </ha-button>
       </div>`;
   }
 

src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts

@@ -91,12 +91,10 @@ export class AssistPipelineDetailTTS extends LitElement {
        ${
          this.data?.tts_engine
            ? html`<div class="footer">
-               <ha-button
+               <ha-button @click=${this._preview}>
-                 .label=${this.hass.localize(
+                 ${this.hass.localize(
                    "ui.panel.config.voice_assistants.assistants.pipeline.detail.try_tts"
                  )}
-                 @click=${this._preview}
-               >
                </ha-button>
              </div>`
            : nothing

src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts

@@ -61,10 +61,12 @@ export class AssistPipelineRunDebug extends LitElement {
                 slot="toolbar-icon"
                 @click=${this._clearConversation}
                 .disabled=${!this._finished}
+                appearance="plain"
               >
                 ${this.hass.localize("ui.common.clear")}
               </ha-button>
               <ha-button
+                appearance="plain"
                 slot="toolbar-icon"
                 @click=${this._downloadConversation}
               >
@@ -83,13 +85,16 @@ export class AssistPipelineRunDebug extends LitElement {
                     @value-changed=${this._pipelinePicked}
                   ></ha-assist-pipeline-picker>
                   <div class="start-buttons">
-                    <ha-button raised @click=${this._runTextPipeline}>
+                    <ha-button
+                      appearance="filled"
+                      @click=${this._runTextPipeline}
+                    >
                       ${this.hass.localize(
                         "ui.panel.config.voice_assistants.debug.pipeline.run_text_pipeline"
                       )}
                     </ha-button>
                     <ha-button
-                      raised
+                      appearance="filled"
                       @click=${this._runAudioPipeline}
                       .disabled=${!window.isSecureContext ||
                       // @ts-ignore-next-line
@@ -100,7 +105,7 @@ export class AssistPipelineRunDebug extends LitElement {
                       )}
                     </ha-button>
                     <ha-button
-                      raised
+                      appearance="filled"
                       @click=${this._runAudioWakeWordPipeline}
                       .disabled=${!window.isSecureContext ||
                       // @ts-ignore-next-line
@@ -135,13 +140,19 @@ export class AssistPipelineRunDebug extends LitElement {
                   ? this._pipelineRuns[0].init_options!.start_stage ===
                     "wake_word"
                     ? html`
-                        <ha-button @click=${this._runAudioWakeWordPipeline}>
+                        <ha-button
+                          appearance="filled"
+                          @click=${this._runAudioWakeWordPipeline}
+                        >
                           ${this.hass.localize(
                             "ui.panel.config.voice_assistants.debug.pipeline.continue_listening"
                           )}
                         </ha-button>
                       `
-                    : html`<ha-button @click=${this._runAudioPipeline}>
+                    : html`<ha-button
+                        appearance="filled"
+                        @click=${this._runAudioPipeline}
+                      >
                         ${this.hass.localize(
                           "ui.panel.config.voice_assistants.debug.pipeline.continue_talking"
                         )}

src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts

@@ -182,13 +182,11 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
                   ${this.hass.localize(
                     "ui.panel.config.voice_assistants.assistants.pipeline.detail.no_cloud_message"
                   )}
-                  <a href="/config/cloud" slot="action">
+                  <ha-button size="small" href="/config/cloud" slot="action">
-                    <ha-button>
                     ${this.hass.localize(
                       "ui.panel.config.voice_assistants.assistants.pipeline.detail.no_cloud_action"
                     )}
                   </ha-button>
-                  </a>
                 </ha-alert>
               `
             : nothing}

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

@@ -164,12 +164,16 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
         ${this._results.length
           ? html`
               <div class="result-toolbar">
-                <ha-button outlined @click=${this._clear} variant="danger">
+                <ha-button
-                  <ha-svg-icon slot="icon" .path=${mdiTrashCan}></ha-svg-icon>
+                  appearance="filled"
+                  @click=${this._clear}
+                  variant="danger"
+                >
+                  <ha-svg-icon slot="start" .path=${mdiTrashCan}></ha-svg-icon>
                   ${this.hass.localize("ui.common.clear")}
                 </ha-button>
-                <ha-button outlined @click=${this._download}>
+                <ha-button appearance="filled" @click=${this._download}>
-                  <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
+                  <ha-svg-icon slot="start" .path=${mdiDownload}></ha-svg-icon>
                   ${this.hass.localize(
                     "ui.panel.developer-tools.tabs.assist.download_results"
                   )}

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

@@ -287,6 +287,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
         slot="secondaryAction"
         .disabled=${this._busy}
         @click=${this._clearChosenStatistic}
+        appearance="plain"
       >
         ${this.hass.localize("ui.common.back")}</ha-button
       >

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

@@ -154,12 +154,9 @@ export class HuiDialogSuggestCard extends LitElement {
                 slot="primaryAction"
                 .disabled=${this._saving}
                 @click=${this._save}
+                .loading=${this._saving}
               >
-                ${this._saving
+                ${this.hass!.localize(
-                  ? html`
-                      <ha-spinner aria-label="Saving" size="small"></ha-spinner>
-                    `
-                  : this.hass!.localize(
                   "ui.panel.lovelace.editor.suggest_card.add"
                 )}
               </ha-button>

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

@@ -372,14 +372,9 @@ export class HuiCardFeaturesEditor extends LitElement {
               @action=${this._addFeature}
               @closed=${stopPropagation}
             >
-              <ha-button
+              <ha-button slot="trigger" appearance="filled" size="small">
-                slot="trigger"
+                <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
-                outlined
+                ${this.hass!.localize(`ui.panel.lovelace.editor.features.add`)}
-                .label=${this.hass!.localize(
-                  `ui.panel.lovelace.editor.features.add`
-                )}
-              >
-                <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
               </ha-button>
               ${types.map(
                 (type) => html`

src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts

@@ -120,11 +120,11 @@ export class HuiHeadingBadgesEditor extends LitElement {
       <div class="add-container">
         <ha-button
           data-add-entity
-          outlined
+          appearance="filled"
-          .label=${this.hass!.localize(`ui.panel.lovelace.editor.entities.add`)}
           @click=${this._addEntity}
         >
-          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+          <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
+          ${this.hass!.localize(`ui.panel.lovelace.editor.entities.add`)}
         </ha-button>
         ${this._renderPicker()}
       </div>

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

@@ -110,7 +110,11 @@ export class HuiDialogSelectDashboard extends LitElement {
               </div>`}
         </div>
         <div slot="actions">
-          <ha-button @click=${this.closeDialog} .disabled=${this._saving}>
+          <ha-button
+            appearance="plain"
+            @click=${this.closeDialog}
+            .disabled=${this._saving}
+          >
             ${this.hass!.localize("ui.common.cancel")}
           </ha-button>
           <ha-button

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

@@ -253,12 +253,13 @@ export class HuiDialogEditView extends LitElement {
                     "ui.panel.lovelace.editor.edit_view.card_to_section_convert"
                   )}
                   <ha-button
+                    size="small"
                     slot="action"
-                    .label=${this.hass!.localize(
-                      "ui.panel.lovelace.editor.edit_view.convert_view"
-                    )}
                     @click=${this._convertToSection}
                   >
+                    ${this.hass!.localize(
+                      "ui.panel.lovelace.editor.edit_view.convert_view"
+                    )}
                   </ha-button>
                 </ha-alert>
               `

src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts

@@ -139,10 +139,8 @@ export class HuiDialogEditViewHeader extends LitElement {
           slot="primaryAction"
           .disabled=${!this._config || this._saving || !this._dirty}
           @click=${this._save}
+          .loading=${this._saving}
         >
-          ${this._saving
-            ? html`<ha-spinner size="small" aria-label="Saving"></ha-spinner>`
-            : nothing}
           ${this.hass!.localize("ui.common.save")}</ha-button
         >
       </ha-dialog>

src/panels/media-browser/ha-bar-media-player.ts

@@ -703,17 +703,6 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
     ha-list-item[selected] {
       font-weight: var(--ha-font-weight-bold);
     }
-
-    span[slot="icon"] {
-      display: flex;
-      align-items: center;
-    }
-
-    ha-svg-icon[slot="trailingIcon"] {
-      margin-inline-start: 8px !important;
-      margin-inline-end: 0px !important;
-      direction: var(--direction);
-    }
   `;
 }
 

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

@@ -187,11 +187,6 @@ class HaMfaModuleSetupFlow extends LitElement {
           padding: 10px 100px 34px;
           text-align: center;
         }
-        .submit-spinner {
-          margin-right: 16px;
-          margin-inline-end: 16px;
-          margin-inline-start: initial;
-        }
       `,
     ];
   }

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

@@ -191,10 +191,7 @@ class PanelTodo extends LitElement {
                         : this._entityId
                       : ""}
                   </div>
-                  <ha-svg-icon
+                  <ha-svg-icon slot="end" .path=${mdiChevronDown}></ha-svg-icon>
-                    slot="trailingIcon"
-                    .path=${mdiChevronDown}
-                  ></ha-svg-icon>
                 </ha-button>
                 ${listItems}
                 ${this.hass.user?.is_admin
@@ -395,27 +392,7 @@ class PanelTodo extends LitElement {
           max-width: 100%;
         }
         ha-button-menu ha-button {
-          --button-slot-container-overflow: hidden;
+          --ha-font-size-m: var(--ha-font-size-l);
-          max-width: 100%;
-          --mdc-theme-primary: currentColor;
-          --mdc-typography-button-text-transform: none;
-          --mdc-typography-button-font-size: var(
-            --mdc-typography-headline6-font-size,
-            var(--ha-font-size-l)
-          );
-          --mdc-typography-button-font-weight: var(
-            --mdc-typography-headline6-font-weight,
-            500
-          );
-          --mdc-typography-button-letter-spacing: var(
-            --mdc-typography-headline6-letter-spacing,
-            0.0125em
-          );
-          --mdc-typography-button-line-height: var(
-            --mdc-typography-headline6-line-height,
-            var(--ha-line-height-expanded)
-          );
-          --button-height: 40px;
         }
         ha-button-menu ha-button div {
           text-overflow: ellipsis;