From d248f5614f4cb837fda7a6fb7dfcbf4667a7c4f3 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 3 Mar 2026 13:34:05 +0100
Subject: [PATCH] Add label for toggle button in area strategy (#29949)

---
 src/components/ha-control-button.ts                      | 3 ++-
 src/components/ha-heading-badge.ts                       | 2 +-
 src/panels/light/strategies/light-view-strategy.ts       | 9 ++++++---
 .../lovelace/heading-badges/hui-button-heading-badge.ts  | 4 +++-
 src/translations/en.json                                 | 4 +++-
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/ha-control-button.ts b/src/components/ha-control-button.ts
index 8165d7b6ba..470b310177 100644
--- a/src/components/ha-control-button.ts
+++ b/src/components/ha-control-button.ts
@@ -33,6 +33,7 @@ export class HaControlButton extends LitElement {
       --control-button-background-color: var(--disabled-color);
       --control-button-background-opacity: 0.2;
       --control-button-border-radius: var(--ha-border-radius-md);
+      --control-button-font-weight: var(--ha-font-weight-medium);
       --control-button-padding: 8px;
       --mdc-icon-size: 20px;
       --ha-ripple-color: var(--secondary-text-color);
@@ -59,7 +60,7 @@ export class HaControlButton extends LitElement {
       box-sizing: border-box;
       line-height: inherit;
       font-family: var(--ha-font-family-body);
-      font-weight: var(--ha-font-weight-medium);
+      font-weight: var(--control-button-font-weight);
       outline: none;
       overflow: hidden;
       background: none;
diff --git a/src/components/ha-heading-badge.ts b/src/components/ha-heading-badge.ts
index 27def2d750..db9ef679d7 100644
--- a/src/components/ha-heading-badge.ts
+++ b/src/components/ha-heading-badge.ts
@@ -38,7 +38,7 @@ export class HaBadge extends LitElement {
       font-weight: var(--ha-heading-badge-font-weight, 400);
       line-height: var(--ha-heading-badge-line-height, 20px);
       letter-spacing: 0.1px;
-      --mdc-icon-size: 14px;
+      --mdc-icon-size: 16px;
     }
     ::slotted([slot="icon"]) {
       --ha-icon-display: block;
diff --git a/src/panels/light/strategies/light-view-strategy.ts b/src/panels/light/strategies/light-view-strategy.ts
index 29aa9ea20a..c499920ce7 100644
--- a/src/panels/light/strategies/light-view-strategy.ts
+++ b/src/panels/light/strategies/light-view-strategy.ts
@@ -17,6 +17,7 @@ import {
   SMALL_SCREEN_CONDITION,
 } from "../../lovelace/strategies/helpers/screen-conditions";
 import type { ToggleGroupCardConfig } from "../../lovelace/cards/types";
+import type { ButtonHeadingBadgeConfig } from "../../lovelace/heading-badges/types";
 
 export interface LightViewStrategyConfig {
   type: "light";
@@ -75,6 +76,7 @@ const processAreasForLight = (
           {
             type: "button",
             icon: "mdi:power",
+            text: hass.localize("ui.panel.lovelace.strategy.light.off"),
             tap_action: {
               action: "perform-action",
               perform_action: "light.turn_on",
@@ -89,11 +91,12 @@ const processAreasForLight = (
                 conditions: [anyOnCondition],
               },
             ],
-          },
+          } satisfies ButtonHeadingBadgeConfig,
           {
             type: "button",
             icon: "mdi:power",
-            color: "amber",
+            color: "orange",
+            text: hass.localize("ui.panel.lovelace.strategy.light.on"),
             tap_action: {
               action: "perform-action",
               perform_action: "light.turn_off",
@@ -102,7 +105,7 @@ const processAreasForLight = (
               },
             },
             visibility: [SMALL_SCREEN_CONDITION, anyOnCondition],
-          },
+          } satisfies ButtonHeadingBadgeConfig,
         ] satisfies LovelaceCardConfig[],
       });
 
diff --git a/src/panels/lovelace/heading-badges/hui-button-heading-badge.ts b/src/panels/lovelace/heading-badges/hui-button-heading-badge.ts
index bffb00172c..d3a405afdd 100644
--- a/src/panels/lovelace/heading-badges/hui-button-heading-badge.ts
+++ b/src/panels/lovelace/heading-badges/hui-button-heading-badge.ts
@@ -108,7 +108,7 @@ export class HuiButtonHeadingBadge
         var(--ha-border-radius-pill)
       );
       --control-button-padding: 0;
-      --mdc-icon-size: var(--ha-heading-badge-icon-size, 14px);
+      --mdc-icon-size: var(--ha-heading-badge-icon-size, 16px);
       width: auto;
       height: var(--ha-heading-badge-size, 26px);
       min-width: var(--ha-heading-badge-size, 26px);
@@ -121,6 +121,8 @@ export class HuiButtonHeadingBadge
       --control-button-icon-color: var(--color);
       --control-button-background-color: var(--color);
       --control-button-focus-color: var(--color);
+      --control-button-background-opacity: 0.2;
+      --control-button-font-weight: var(--ha-font-weight-bold);
       --ha-ripple-color: var(--color);
     }
     .content {
diff --git a/src/translations/en.json b/src/translations/en.json
index 5d448552d3..9fc05508cc 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -8089,7 +8089,9 @@
           },
           "light": {
             "lights": "Lights",
-            "other_lights": "Other lights"
+            "other_lights": "Other lights",
+            "on": "On",
+            "off": "Off"
           },
           "security": {
             "devices": "Devices",