Migrate state card button to control button

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-advertisement-monitor.ts

@@ -222,7 +222,6 @@ export class BluetoothAdvertisementMonitorPanel extends LitElement {
         filter=${this.address || ""}
         clickable
         .tabs=${bluetoothTabs}
-        back-path="/config"
       ></hass-tabs-subpage-data-table>
     `;
   }

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

@@ -161,7 +161,6 @@ export class BluetoothConfigDashboard extends LitElement {
         .hass=${this.hass}
         .route=${this.route}
         .tabs=${bluetoothTabs}
-        back-path="/config"
       >
         <div class="content">
           <ha-card

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-connection-monitor.ts

@@ -225,7 +225,6 @@ export class BluetoothConnectionMonitorPanel extends LitElement {
         )}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
-        back-path="/config"
       ></hass-tabs-subpage-data-table>
     `;
   }

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts

@@ -124,7 +124,6 @@ export class BluetoothNetworkVisualization extends LitElement {
         .narrow=${this.narrow}
         .route=${this.route}
         .tabs=${bluetoothTabs}
-        back-path="/config"
       >
         <ha-network-graph
           .hass=${this.hass}

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

@@ -111,7 +111,6 @@ class ZHAConfigDashboard extends LitElement {
         .narrow=${this.narrow}
         .route=${this.route}
         .tabs=${zhaTabs}
-        back-path="/config"
         has-fab
       >
         <div class="container">

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

@@ -101,7 +101,6 @@ export class ZHAGroupsDashboard extends LitElement {
     return html`
       <hass-tabs-subpage-data-table
         .tabs=${zhaTabs}
-        back-path="/config"
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}

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

@@ -54,7 +54,6 @@ export class ZHANetworkVisualizationPage extends LitElement {
     return html`
       <hass-tabs-subpage
         .tabs=${zhaTabs}
-        back-path="/config"
         .hass=${this.hass}
         .narrow=${this.narrow}
         .isWide=${this.isWide}

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

@@ -151,7 +151,6 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         .route=${this.route}
         .tabs=${configTabs}
-        back-path="/config"
         has-fab
       >
         <ha-icon-button

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

@@ -67,7 +67,6 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         .route=${this.route}
         .tabs=${configTabs}
-        back-path="/config"
       >
         <div class="container">
           <ha-card>

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-visualization.ts

@@ -77,7 +77,6 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         .route=${this.route}
         .tabs=${configTabs}
-        back-path="/config"
       >
         <ha-network-graph
           .hass=${this.hass}

src/state-summary/state-card-button.ts

@@ -1,10 +1,11 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../components/entity/ha-entity-toggle";
 import "../components/entity/state-info";
-import "../components/ha-button";
+import "../components/ha-control-button-group";
+import "../components/ha-control-button";
 import { UNAVAILABLE } from "../data/entity/entity";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -26,14 +27,14 @@ class StateCardButton extends LitElement {
           .stateObj=${stateObj}
           .inDialog=${this.inDialog}
         ></state-info>
-        <ha-button
-          appearance="plain"
-          size="small"
-          @click=${this._pressButton}
-          .disabled=${stateObj.state === UNAVAILABLE}
-        >
-          ${this.hass.localize("ui.card.button.press")}
-        </ha-button>
+        <ha-control-button-group>
+          <ha-control-button
+            .disabled=${stateObj.state === UNAVAILABLE}
+            @click=${this._pressButton}
+          >
+            ${this.hass.localize("ui.card.button.press")}
+          </ha-control-button>
+        </ha-control-button-group>
       </div>
     `;
   }
@@ -46,7 +47,24 @@ class StateCardButton extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return haStyle;
+    return [
+      haStyle,
+      css`
+        ha-control-button-group > ha-control-button {
+          --control-button-padding: var(--ha-space-4);
+        }
+        ha-control-button {
+          --control-button-focus-color: var(
+            --feature-color,
+            var(--primary-color)
+          );
+          --control-button-icon-color: var(
+            --feature-color,
+            var(--primary-color)
+          );
+        }
+      `,
+    ];
   }
 }
 

src/state-summary/state-card-input_button.ts

@@ -1,10 +1,11 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../components/entity/ha-entity-toggle";
 import "../components/entity/state-info";
-import "../components/ha-button";
+import "../components/ha-control-button-group";
+import "../components/ha-control-button";
 import { UNAVAILABLE } from "../data/entity/entity";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -26,13 +27,14 @@ class StateCardInputButton extends LitElement {
           .stateObj=${stateObj}
           .inDialog=${this.inDialog}
         ></state-info>
-        <ha-button
-          appearance="plain"
-          @click=${this._pressButton}
-          .disabled=${stateObj.state === UNAVAILABLE}
-        >
-          ${this.hass.localize("ui.card.button.press")}
-        </ha-button>
+        <ha-control-button-group>
+          <ha-control-button
+            .disabled=${stateObj.state === UNAVAILABLE}
+            @click=${this._pressButton}
+          >
+            ${this.hass.localize("ui.card.button.press")}
+          </ha-control-button>
+        </ha-control-button-group>
       </div>
     `;
   }
@@ -45,7 +47,24 @@ class StateCardInputButton extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return haStyle;
+    return [
+      haStyle,
+      css`
+        ha-control-button-group > ha-control-button {
+          --control-button-padding: var(--ha-space-4);
+        }
+        ha-control-button {
+          --control-button-focus-color: var(
+            --feature-color,
+            var(--primary-color)
+          );
+          --control-button-icon-color: var(
+            --feature-color,
+            var(--primary-color)
+          );
+        }
+      `,
+    ];
   }
 }