Add label for add badge button in masonry and sidebar view (#23827)

Add label for add badge button in mansonry and sidebar view

src/panels/lovelace/badges/hui-view-badges.ts

@@ -32,6 +32,9 @@ export class HuiViewBadges extends LitElement {
 
   @property({ attribute: false }) public viewIndex!: number;
 
+  @property({ type: Boolean, attribute: "show-add-label" })
+  public showAddLabel!: boolean;
+
   @state() _dragging = false;
 
   private _badgeConfigKeys = new WeakMap<HuiBadge, string>();
@@ -153,6 +156,11 @@ export class HuiViewBadges extends LitElement {
                       >
                         <ha-ripple></ha-ripple>
                         <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
+                        ${this.showAddLabel
+                          ? this.hass.localize(
+                              "ui.panel.lovelace.editor.section.add_badge"
+                            )
+                          : nothing}
                       </button>
                     `
                   : nothing}
@@ -201,6 +209,7 @@ export class HuiViewBadges extends LitElement {
       border-color: var(--primary-color);
       --mdc-icon-size: 18px;
       cursor: pointer;
+      font-size: 14px;
       color: var(--primary-text-color);
       --ha-ripple-color: var(--primary-color);
       --ha-ripple-hover-opacity: 0.04;

src/panels/lovelace/views/hui-masonry-view.ts

@@ -80,6 +80,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
         .badges=${this.badges}
         .lovelace=${this.lovelace}
         .viewIndex=${this.index}
+        show-add-label
       ></hui-view-badges>
       <div
         id="columns"

src/panels/lovelace/views/hui-sidebar-view.ts

@@ -88,6 +88,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
         .badges=${this.badges}
         .lovelace=${this.lovelace}
         .viewIndex=${this.index}
+        show-add-label
       ></hui-view-badges>
       <div
         class="container ${this.lovelace?.editMode ? "edit-mode" : ""}"