Anyone else prefer the old badges? Anyway to get the old (<2024.8.0) style back? Not sure why “if it ain’t broke, don’t fix it” does not apply.
It is kind of nice that they wrap around on mobile screens, but the important information is so much smaller with the wider aspect angle for each badge.
Solution:
Change the type to type: custom:hui-state-badge-element in the GUI
haven’t figured out how to change the label, like the old “name” fields
No I don’t.
But the method for using the old style has been mentioned more than once in the release notes topic in the Blog category.
I think it’s good to move forward and renew things.
Remember that it’s also a WIP. I have expressed my concerns too, but sticking with the old isn’t the solution. Let’s all make proposals for how to improve this.
As Tom said, you can still reference the old one for now. Any card-mod hacks will need to be updated and some people have spacing issues. See the main release topic or the dedicated topic for more info. Fragmenting the conversation makes things harder.
I think the new badges should have appeared only in the “sections” view (since it’s experimental).
I’ve been using HA for years, and have been very happy with every new release. But this one… The badges are just awful.
Ha. Badges were always awful (IMO).
I had very customized badges, custom shapes acording to status, custom colors with templates, all the same size;, and now they are gone, and these so-called-beautifull-new-badges simpy do not replace old layout. Why kill a feature like this???
I spent A LOT of time customizing this, gave them a lot of love, and now, not even the chance to keep old format with existing customizations??? Why???
Just to explain the amout of customization, this is the code associated with the 2nd badge of the top image:
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border: solid 3px;
border-top-style:
{%- if states('binary_sensor.modo_dormir') == 'on' -%}
solid
{%- elif states('binary_sensor.modo_cozinha') == 'on' -%}
dotted
{%- elif states('vacuum.roborock_q7_max') == 'cleaning' -%}
solid
{%- elif states('binary_sensor.modo_refeicao') == 'on' -%}
solid
{%- elif states('input_boolean.duche') == 'on' -%}
dotted
{%- elif states('input_boolean.modo_visitas') == 'on' -%}
solid
{%- elif states('input_boolean.modo_criancas') == 'on' -%}
solid
{%- elif states('input_boolean.modo_filme') == 'on' -%}
dashed
{%- elif states('input_boolean.modo_maquilhagem') == 'on' -%}
solid
{%- elif states('binary_sensor.modo_ferias') == 'on' -%}
solid
{%- elif states('input_boolean.modo_lareira') == 'on' -%}
dotted
{%- else -%}
solid
{%- endif %};
border-bottom-style:
{%- if states('binary_sensor.modo_dormir') == 'on' -%}
solid
{%- elif states('binary_sensor.modo_cozinha') == 'on' -%}
solid
{%- elif states('vacuum.roborock_q7_max') == 'cleaning' -%}
dotted
{%- elif states('binary_sensor.modo_refeicao') == 'on' -%}
solid
{%- elif states('input_boolean.duche') == 'on' -%}
dotted
{%- elif states('input_boolean.modo_visitas') == 'on' -%}
solid
{%- elif states('input_boolean.modo_criancas') == 'on' -%}
solid
{%- elif states('input_boolean.modo_filme') == 'on' -%}
solid
{%- elif states('input_boolean.modo_maquilhagem') == 'on' -%}
solid
{%- elif states('binary_sensor.modo_ferias') == 'on' -%}
solid
{%- elif states('input_boolean.modo_lareira') == 'on' -%}
solid
{%- else -%}
solid
{%- endif %};
border-left-style:
{%- if states('input_boolean.modo_lareira') == 'on' -%}
dashed
{%- else -%}
solid
{%- endif %};
border-right-style:
{%- if states('input_boolean.modo_lareira') == 'on' -%}
dashed
{%- else -%}
solid
{%- endif %};
color:
{%- if states('binary_sensor.modo_dormir') == 'on' -%}
purple
{%- elif states('binary_sensor.modo_cozinha') == 'on' -%}
mediumturquoise
{%- elif states('vacuum.roborock_q7_max') == 'cleaning' -%}
mediumaquamarine
{%- elif states('binary_sensor.modo_refeicao') == 'on' -%}
tomato
{%- elif states('input_boolean.duche') == 'on' -%}
cyan
{%- elif states('input_boolean.modo_visitas') == 'on' -%}
yellow
{%- elif states('input_boolean.modo_criancas') == 'on' -%}
yellow
{%- elif states('input_boolean.modo_filme') == 'on' -%}
coral
{%- elif states('input_boolean.modo_maquilhagem') == 'on' -%}
orangered
{%- elif states('binary_sensor.modo_ferias') == 'on' -%}
deepskyblue
{%- elif states('input_boolean.modo_lareira') == 'on' -%}
darkorange
{%- else -%}
darkgray
{%- endif %} !important;
}
.: |
:host {
--ha-label-badge-border-radius:
{%- if states('binary_sensor.modo_dormir') == 'on' -%}
30%
{%- elif states('binary_sensor.modo_cozinha') == 'on' -%}
5% 5% 40% 40%
{%- elif states('vacuum.roborock_q7_max') == 'cleaning' -%}
40% 40% 5% 5%
{%- elif states('binary_sensor.modo_refeicao') == 'on' -%}
30%
{%- elif states('input_boolean.duche') == 'on' -%}
5%
{%- elif states('input_boolean.modo_visitas') == 'on' -%}
30%
{%- elif states('input_boolean.modo_criancas') == 'on' -%}
30%
{%- elif states('input_boolean.modo_filme') == 'on' -%}
0% 0% 15% 15%
{%- elif states('input_boolean.modo_maquilhagem') == 'on' -%}
30%
{%- elif states('binary_sensor.modo_ferias') == 'on' -%}
30%
{%- elif states('input_boolean.modo_lareira') == 'on' -%}
40% 40% 5% 5%
{%- else -%}
30%
{%- endif %};
--ha-label-badge-size: 50px;
--ha-label-badge-title-width: 57px;
--label-badge-background-color: {% if states('binary_sensor.presenca_casa') == 'on' %} #024f23 {% else %} #6a3f07 {% endif %};
--mdc-icon-size: 40px;
}
And this one to the first badge:
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border: solid 3px;
box-shadow: inset 0px 0px 0px 0px greenyellow;
color:
{%- if states('alarm_control_panel.alarme_geral') == 'armed_away' -%}
greenyellow
{%- elif states('alarm_control_panel.alarme_geral') == 'armed_home' -%}
mediumturquoise
{%- elif states('alarm_control_panel.alarme_geral') == 'armed_night' -%}
purple
{%- elif states('alarm_control_panel.alarme_geral') == 'armed_vacation' -%}
deepskyblue
{%- elif states('alarm_control_panel.alarme_geral') == 'arming' -%}
orange
{%- elif states('alarm_control_panel.alarme_geral') == 'disarmed' -%}
darkgray
{%- elif states('alarm_control_panel.alarme_geral') == 'pending' -%}
tomato
{%- elif states('alarm_control_panel.alarme_geral') == 'triggered' -%}
red
{%- else -%}
darkgray
{%- endif %} !important;
}
.: |
:host {
--ha-label-badge-border-radius: {% if states('alarm_control_panel.alarme_geral') == 'disarmed' %} 30% {% else %} 15% 15% 55% 55% {% endif %};
--ha-label-badge-size: 50px;
--ha-label-badge-title-width: 57px;
--mdc-icon-size: 32px;
--label-badge-background-color: {% if states('binary_sensor.porta_principal_contact') == 'on' %} #599627 {% else %} var(--primary-background-color) {% endif %};
}
And this one to the last badge:
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border: solid 3px;
color: {{ 'red' if states('switch.localtuya_power_01') == 'on' else 'gray' }} !important;
background-color:
{%- from 'interpolate_rgb.jinja' import interpolate_rgb -%}
{%- set temp = states(config.entity) | float(0) -%}
{%- set temp_map = {
20: "0000ff",
30: "00ffff",
35: "66cdaa",
40: "3cb371",
45: "32cd32",
50: "ffff00",
55: "ffd700",
60: "ffa500",
65: "ff4500",
70: "ff0000",
75: "8b0000"
} -%}
{%- set keys = temp_map | sort -%}
{%- set index = keys | select("lt", temp) | list | length -%}
{%- if index == 0 -%}
#{{ temp_map[keys | first] }}
{%- elif index == keys | length -%}
#{{ temp_map[keys | last] }}
{%- else -%}
{%- set start = (keys[index - 1], temp_map[keys[index - 1]]) -%}
{%- set stop = (keys[index], temp_map[keys[index]]) -%}
{{ interpolate_rgb(temp, start, stop) }}
{%- endif -%};
}
.badge-container .label-badge .value {
color:
{% if states('sensor.painel_solar_temperature')|int(default=0) < 20 %} cyan
{% elif states('sensor.painel_solar_temperature')|int(default=0) < 38 %} midnightblue
{% elif states('sensor.painel_solar_temperature')|int(default=0) < 55 %} darkgreen
{% elif states('sensor.painel_solar_temperature')|int(default=0) < 65 %} yellow
{% else %} orange {% endif %};
font-weight: regular;
margin-top: -2px;
}
.badge-container .label-badge .label span {
background-color: {{ 'red' if states('switch.localtuya_power_01') == 'on' else 'gray' }} !important;
}
.: |
:host {
--ha-label-badge-border-radius: 30%;
--ha-label-badge-size: 50px;
--ha-label-badge-title-width: 57px;
--ha-label-badge-font-size: 22px;
}
How can I keep this??? Please?
Can you help me customize them how they were? HA always has been pretty customizable, but I don’t know how to get to this kind of styling with the custom:hui-state-badge-element. I spent more than a year customizing all my badges to my liking, but now only the default (agee, not very pretty) format. In fact, I already tryed a lot of combos to get some kind of change, and… nothing at all.
(can you take a look at he code above for some of the buttons?)
Thanks in advance!
The “type: custom:hui-state-badge-element” trick mentioned is almost the old style. The resulting badges are bigger and name: no longer works, you have to change the entity name. Hopefully 2024.9.0 will revert or at least allow the actual old option to work without a hack.
If anything the hack may eventually disappear altogether. The new badges are here to stay.
Accessing that custom card type should be seen as a migration path.
It’s downright comical that the smallest UI widget, a “postage stamp”, gets a makeover into the size of an envelope.
What was once chosen for its compactness is now about twice as wide; it’s an unacknowledged breaking change.
I don’t have time to redesign my dashboard to accommodate this breakage so I will stay with 2024.7.4 until the new badges can be configured without icons.
If that doesn’t happen in the next version or two, I will probably use a Markdown Card to display the info in a table.
I’m also really not amused. Especially in mobile view, the old style badges where fitting nicely. Now they are too wide, when states are included.
These new badges are a breaking change for everyone that customized their badges.
If more time was spent on listing the top 5 customisations applied by users, these new badges would at least allow to template icons, border colors, background colors, names and offer some layout options like horizontal or vertical.
Also not funny is the arrogance, or at the very least the suspect methodology, that lead them to believe that no one would be bothered if they trashed the existing badges…
While my sentiment about these badges have been made clear, I would be cautious to include customisations in the list of issues. I say this having many customisations of badges myself. That is a risk that is known the day you apply customisations.
If the core issues with these badges I have highlighted before are addressed, I’d be happy to migrate.
I agree that customisations are at risk. But I only want to highlight that particular customisations where applied by many (like templating icons and colors). Why is templating of the badge poperties not supported?!
a real change is that the old badges had a vertical layout, the new ones are horizontal. So that should be configurable for compatibility reasons IMHO 
Absolutely. It’s clear to me that if many of the current users, gauging by the feedback so far, were asked what workarounds or extensions they’ve implement for the old badges, the result would’ve been different (or more complete). Templating, icons and colours: agreed.
My view is that the new “badges” do not replace the old badges. They’re not a substitute although they are an alternative. The new badges are more of a mini entity card than a badge. They don’t perform the same function however pretty they might be.
It is unfortunate that the new badges have been forced onto the user base. As someone said, it’s arrogant and inconsiderate. Users were given to understand the changes were non-breaking but that is just untrue.
The hui-state-badge-element is helpful but is not a drop in replacement because it has its own difficulties. The “name” attribute and the loss of card-mod styling for example.
Whether or not one prefers the new or old badges this has been a badly managed introduction to a new new feature.
I Too hate the new badges due to the width of them. What would improve them is an option to disable the icon and then decrease the width.