per ha 2025.8 action button no longer shows correct style

[Mariusthvdb]

check the core energy-distribution

and the currently showing power-flow-card

seems the css selectors are not in sync at the moment

[dcapslock]

Button needs to be updated from mwc-button to ha-button.

[Mariusthvdb]

yes, but given the activity in this card, I fear it will not be updated anytime soon. can we manually do that in the resource? (id not want to form and maintain....)

I tested

        ${this._config.dashboard_link?O`
              <div class="card-actions">
                <a href=${this._config.dashboard_link}
                  ><ha-button appearance="plain" size="small" variant="brand">
                    ${this.hass.localize("ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard")}
                  </ha-button></a
                >
              </div>
            `:""}

and some styling on the element card-actions but that does not help yet

[dcapslock]

Yes, pretty easy. Direct change of mwc-button to ha-button and if .label attribute was used, this moves to elemnt text.

[dcapslock]

E.g. Like this change in Browser Mod

https://github.com/thomasloven/hass-browser_mod/pull/957/files#diff-aa68f53d8f8e955d1fdb854eafbfa53558178aa816fe76862639137d19ad08e4L116

[Mariusthvdb]

hmm, but, how then to change this?

        ${this._config.dashboard_link?O`
              <div class="card-actions">
                <a href=${this._config.dashboard_link}
                  ><mwc-button>
                    ${this.hass.localize("ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard")}
                  </mwc-button></a
                >
              </div>
            `:""}

it a class="card-actions", should that be taken out too, and add this

@click=${this._secondary}
                           class="action-button"

?

fear I need a ready made snippet.

The styling of the original card-actions

    :host ::slotted(.card-actions) {
      border-top: 1px solid var(--divider-color, #e8e8e8);
      padding: 8px;
    }

can probably be left as is, because the current already looks alike

[Mariusthvdb]

got it!

changed to:

        ${this._config.dashboard_link?O`
              <div class="card-actions">
                <a href=${this._config.dashboard_link}
                  ><ha-button appearance="plain" size="small" variant="brand">
                    ${this.hass.localize("ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard")}
                  </ha-button></a
                >
              </div>
            `:""}

and adjusted the styling with the padding (mainly because the text would move to the right otherwise

    .card-actions a {
      text-decoration: none;
      padding: 8px 0px;
    }

there is still a very tiny movement when changing between the two cards, but it is not the card-actions causing it ;-)

[dcapslock]

Looks good. You can do a PR 😜