see 2 posts above, use ha-label-badge-size: 30px in your theme and it sets that to all badges
type: custom:mod-card
card_mod:
style: |
:host {
--stack-card-gap: 0;
}
card:
type: horizontal-stack
(use grid-card-gap for a grid card)
type: custom:mod-card
card_mod:
style: |
:host {
--grid-card-gap: 2px;
}
card:
type: grid
or, are you asking between the cards in the view itself ? that would probably an override in card-mod theming
I’m looking for that gap, the green part, but as I’m using transparent background, I can change my stack-in-card to an horizontal-stack and try your code
yes, the stack-in-card is no longer required if you add a few systemic card-mods. 
let me know, because I believe you could otherwise also mod the gaps in stack-in-card itself
I can change in the DevTools by setting the padding to 0px (instead of 16px)
But I think I already tried every CSS selectors without any success
This new badge style is going to kill me
I’m just not going to update to 2024.08 at least until I can customize the badges exactly the way I want, and without wasting a lot of hours doing it.
My current badge layout:
did you try the custom:badge-card?
it was designed for showing badges anywhere in the view.
there’s also a separate card_mod topic 🔹 Card-mod - Add css styles to any lovelace card - #2104 by Ildar_Gabdullin
we might be able to set spacing I side the badge-card for this purpose (didnt yet try, so give it your best shot )
but… I believe the margin is already 0px, so changing that padding wont do anything.
I did test setting a negative margin on the badge individually and that actually move it sideways.
cant say this is the solution to your wish, but at least its some sort of progress…
otoh, the width is required for titles longer than the badge itself, so if we could change it, it would need to adapt dynamically.
Seems a lot of trouble for a deprecated badge, and its inherent design deficiencies…
custom:badge-card is what I’m trying to recreate as it is broken for now 
It is, waiting for the card-mod for the new badges obviously
what is broken?
this is horizontal-stack, didnt need to set the gap to 0, made no difference
(overflow right side,…)
If you’re not using custom:hui-state-badge-element, it is like my screenshot.
If you do, then I can’t specify the name and the icon which for the same entity is different depending on where it is shown (in my config) and for what purpose
Like, on my son’s dashboard, the badge “Ordi” is for him to understand that it is about his computer and it is red when his screentime is over.
The same entity on my admin view is called HP Probook 650 G2 because there is more than one laptop and it is red when it is offline (green otherwise)
You understand my desperate try to redo the old style
I am also struggling with this. I want to keep old badges, I haven’t even customised them, but on some elements I have changed the name so it does not match the entity name (with “name: ”) and this does not work with custom:hui-state-badge-element… Is there a way to change the name while keeping the old badges?
Have you tried the “label” field in the template badge or in the code editor?
I have just did. It doesn’t seem to work…
Try with a simple one, like in this example New badges and card-mod customisation - #3 by RomMuc, it is really “out of the box” and works or share the content of your code 
R.
But I want the old badges, I thought this only works with the new ones, or did I get it wrong?
Is there any way to change font size or background color with the new badges or new mushroom-badges ? Cannot seem to get that to work.
You can still apply the templates you had to provide icons, colours, texts, labels almost the same way you had them before. It is not going to be exactly the same, but after seeing the new badges for around 2 weeks, I’m quite happy (that’s a personal opinion, of course…)
As it seems, there will be no quick solution to style and customize legacy badges, I went for the RomMuc’s solution and recreated all 54 badges with Mushroom.
Basicly the main downside is, that the new badges take twice as much space as the old ones and also customizing is a bit harder or even impossible for certain cases, but as a general solution, it works. I had to add some code to theme also to achieve the “grid look” (defining width of badges etc), but at the end I guess I’ll get used to the new look.
Thx for the hint, RomMuc.
Hi brainstruct,
I am finding the launch of the new badges is not as eloquent as I would have liked (my opinion). Most likely I am missing something blatantly obvious.
As you can see by the image below, there are a number of different ways (by default) presence can be represented on a dashboard (minimal, standard, complete) with entity pictures. I would like to use minimal so that the dashboard can look good on a mobile device, but if i use this, I cannot make out the state of the person.
Is there a way I can show either:
I have tried using card-mod but it does not work (for me at least) on the new badges with entity pictures.
for a second I thought I had a start to succesfully mod the new badges, trying to set a border radius.
it is silly complex though:
- type: custom:mod-card
card:
type: custom:hui-state-label-badge
entity: light.alarm
card_mod:
style: |
.badge {
border-radius: 0;
}
requiring card_mods built in mod-card for cards that don’t set the ha-card element. And the little trick to load any core card as custom, because otherwise it would not be recognized.
loading this very briefly shows the squared border, but immediately, rounds them again. !important doesnt fix it either.
Guess there really is nothing else we can do than wait for a theme variable to become available.
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.