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.
2 Likes
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.
7 Likes
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.
2 Likes
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…
3 Likes
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 
2 Likes
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.
1 Like
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.
10 Likes
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.
2 Likes
Can you please supply a link.
Thankyou. It works.
Replying to myself, I really hated this change, and unconformed with having a non-customized badge, I’m working on a solution, for each type of previous badge, to mimic the UI behaviour (more or less) not losing many customization options, this time using custom:button-card.
Refering the customizations that I had, I’m starting to do custom buttons for each one, and this is what I have until now:
- From This (OLD BEAUTIFUL/CUSTOMIZABLE Badges)
- To THIS (using card-mod / vertical-stack / grid cards)
In my country , we have a saying: “Who doesn’t have a dog hunts with a cat”…
(only did the first 4, with a lot of work, and still not all the functionality, but I WILL GET THERE, unless card-mod stops working… something that would not surprise me, since is not officially supported, but would definitly break my 4 year old 32000+++ lines of yaml dashboard all the way and make me simply give up on this all together). But, since “officially supported features” (old badges) get wasted in a blink of an eye without any consideration for long time users, I surelly could not complain for something “not supported”. Sorry, just venting my frustration, that has been increasing exponationlly latelly, with each “improvement”, I’m “old fashioned”, excuse me.
Sharing my present code, of my setup, just for reference, and if someone wants to help and improve on this (a lot of room), I really appreciate. Still lots of “edges” to round, and some old badges styles still missing, but if there is interest I will post my progress.
type: custom:vertical-stack-in-card
cards:
- square: true
type: grid
columns: 6
cards:
- type: custom:button-card
entity: binary_sensor.porta_principal_contact
name: Principal
show_name: false
show_icon: true
show_label: false
styles:
card:
- border-radius: >
[[[ return states['alarm_control_panel.alarme_geral'].state ===
'disarmed' ? '30%' : '15% 15% 55% 55%'; ]]]
- background-color: >
[[[ return states['binary_sensor.porta_principal_contact'].state
=== 'on' ? '#599627' : 'var(--primary-background-color)'; ]]]
- width: 62px
- height: 62px
- border: 3px solid
- box-shadow: |
[[[
const state = states['alarm_control_panel.alarme_geral'].state;
const colors = {
'armed_away': 'greenyellow',
'armed_home': 'mediumturquoise',
'armed_night': 'purple',
'armed_vacation': 'deepskyblue',
'arming': 'orange',
'disarmed': 'darkgray',
'pending': 'tomato',
'triggered': 'red'
};
return `inset 0px 0px 0px 0px ${colors[state] || 'darkgray'}`;
]]]
- color: |
[[[
const state = states['alarm_control_panel.alarme_geral'].state;
const colors = {
'armed_away': 'greenyellow',
'armed_home': 'mediumturquoise',
'armed_night': 'purple',
'armed_vacation': 'deepskyblue',
'arming': 'orange',
'disarmed': 'darkgray',
'pending': 'tomato',
'triggered': 'red'
};
return colors[state] || 'darkgray';
]]]
icon:
- color: white
- width: 35px
- type: custom:button-card
entity: binary_sensor.presenca_casa
show_name: false
show_icon: true
show_label: false
styles:
card:
- border-radius: |
[[[
return states['binary_sensor.modo_dormir'].state === 'on' ? '30%' :
states['binary_sensor.modo_cozinha'].state === 'on' ? '5% 5% 40% 40%' :
states['vacuum.roborock_q7_max'].state === 'cleaning' ? '40% 40% 5% 5%' :
states['binary_sensor.modo_refeicao'].state === 'on' ? '30%' :
states['input_boolean.duche'].state === 'on' ? '5%' :
states['input_boolean.modo_visitas'].state === 'on' ? '30%' :
states['input_boolean.modo_criancas'].state === 'on' ? '30%' :
states['input_boolean.modo_filme'].state === 'on' ? '0% 0% 15% 15%' :
states['input_boolean.modo_maquilhagem'].state === 'on' ? '30%' :
states['binary_sensor.modo_ferias'].state === 'on' ? '30%' :
states['input_boolean.modo_lareira'].state === 'on' ? '40% 40% 5% 5%' :
'30%';
]]]
- background-color: >
[[[ return states['binary_sensor.presenca_casa'].state === 'on'
? '#024f23' : '#6a3f07'; ]]]
- width: 62px
- height: 62px
- border: 3px solid
- border-top-style: >
[[[ return states['binary_sensor.modo_dormir'].state === 'on' ?
'solid' :
states['binary_sensor.modo_cozinha'].state === 'on' ? 'dotted' :
states['vacuum.roborock_q7_max'].state === 'cleaning' ? 'solid' :
'solid';
]]]
- box-shadow: |
[[[
return `inset 0px 0px 0px 0px ${
{
'on': 'purple',
'off': 'darkgray'
}[states['binary_sensor.modo_dormir'].state] || 'darkgray'
}`;
]]]
name:
- justify-self: center
- padding-top: 10px
- font-size: 14px
- color: var(--primary-text-color)
icon:
- color: white
- width: 45px
- type: custom:button-card
color_type: label-card
entity: sensor.openweathermap_temperature
show_name: false
show_icon: false
show_state: true
state_display: "[[[ return parseFloat(entity.state).toFixed(1) ]]]"
styles:
card:
- border-radius: 30%
- background-color: "#222222"
- width: 62px
- height: 62px
- border: 3px solid
- color: orange
state:
- color: white
- font-weight: bold
- margin-top: "-8px"
- font-size: 19px
grid:
- position: relative
custom_fields:
caixa:
- background-color: orange
- border-radius: 30% 30% 0% 0%
- position: absolute
- left: 26%
- top: 75%
- height: 20px
- width: 28px
- font-size: 13px
- font-weight: bold
- line-height: 19px
- color: white
custom_fields:
caixa: ºC
- type: custom:button-card
entity: sensor.openweathermap_humidity
name: Principal
show_name: false
show_icon: false
show_state: true
state_display: "[[[ return parseFloat(entity.state).toFixed(0) ]]]"
styles:
card:
- border-radius: 30%
- background-color: "#222222"
- width: 62px
- height: 62px
- border: 3px solid
- color: dodgerblue
state:
- color: white
- font-weight: bold
- margin-top: "-8px"
- font-size: 20px
grid:
- position: relative
custom_fields:
caixa:
- background-color: dodgerblue
- border-radius: 30% 30% 0% 0%
- position: absolute
- left: 26%
- top: 75%
- height: 20px
- width: 28px
- font-size: 13px
- font-weight: bold
- line-height: 19px
- color: white
custom_fields:
caixa: "%"
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: grid
columns: 6
square: false
cards:
- type: custom:button-card
entity: binary_sensor.porta_principal_contact
name: Principal
show_name: true
show_icon: false
show_state: true
styles:
card:
- border-radius: 15%
- background-color: "#333233"
- width: 62px
- height: 30px
- border: none
- color: white
state:
- color: white
- font-size: 9px
- color: yellow
name:
- color: white
- font-weight: bold
- font-size: 10px
- type: custom:button-card
entity: binary_sensor.presenca_casa
name: Presença
show_name: true
show_icon: false
show_state: true
styles:
card:
- border-radius: 15%
- background-color: "#333233"
- width: 62px
- height: 30px
- border: none
- color: white
state:
- color: white
- font-size: 9px
- color: yellow
name:
- color: white
- font-weight: bold
- font-size: 10px
- type: custom:button-card
entity: sensor.openweathermap_temperature
name: Temperatura
show_name: true
show_icon: false
show_state: false
styles:
card:
- border-radius: 15%
- background-color: orange
- width: 62px
- height: 30px
- border: none
- color: white
name:
- color: white
- font-weight: bold
- font-size: 9px
- type: custom:button-card
entity: sensor.openweathermap_humidity
name: Humidade
show_name: true
show_icon: false
show_state: false
styles:
card:
- border-radius: 15%
- background-color: dodgerblue
- width: 62px
- height: 30px
- border: none
- color: white
name:
- color: white
- font-weight: bold
- font-size: 9px
- type: custom:mushroom-template-badge
content: Consumo
- type: custom:mushroom-template-badge
content: T.Água
card_mod:
style: |
ha-card {
background: none;
border: none;
}
(removed custom actions for each BUTTON (because it’s NOT REALLY A BADGE)
If you want to make them round, just replace the ‘30%’ with ‘50%’ in every:
styles:
card:
- border-radius: 30%
Thank you, for reading this, and thank YOU also, reading this, that helps everyone that you can.
3 Likes
Open source does not mean any old garbage is accepted. The project has a management team that decide what gets accepted into the core.
You are allowed to give feedback, no one is stopping you.
Just like I am allowed to inform you of the current projects direction if I know it.
Agreed. My 1ct against a full account. One’s garbage may be someone’s treasure… It is what it is, if I don’t accept, my problem. And thank you for sharing the directions of the project. Sorry, my mistake. Post deleted.
And this can make you more happy - it restores a possibility to use card-mod for badges on a view:
1 Like
Thank you!!! Missed that, and definitely gonna check that out, because I still didn’t hed the time to do all of the badges I had!
1 Like