I’m either the only one or a lot of people have this issue with the grid: I have a lot of dashboard items that are an odd number of items across when using mushroom. I’m kinda forced into 2x2 for these situations. I hate how it can’t deal with resizing 3 items. I get it: grid. I don’t think that can be solved.
“Shorter” as in not as tall or not as wide?
The width of the new badges that appears to be at least twice as wide as the old ones (because the icon seems to be mandatory according to the beta docs) and even wider if a title is included (because it appears beside the value).
I will tinker with it this weekend and see what I can do.
I appreciate the suggestion and the detailed example.
I think we can agree that using that particular custom card requires at least three times the work just to get half the appearance.
I’ll see what I can do with the new badges.
The name of the badge appears above the state of the badge. It will only get wider if you want to show attributes next to the state.
2 Likes
@madelena Tip: Screenshots says more than a 1000 words… 
But from my opinion: I’m happy to see that decisions are made and HA is moving forward. I would love to see the old version of the “redesigned” cards move to HACS rather than being in core.
HA core should provide all the functionality and flexibility which is needed to make your own cards, override the existing cards in design/style and perhaps structure.
Without having the guts to break things (although it should be documented properly, and moved to HACS) HA core card-design and user experience will not be better in the future.
Personally, I hate it that I have to rely on 3rd party cards provided by HACS… But perhaps that was a design decision made in the past. Although, I think that the tile-card could be the Swiss army knife of cards, when all features are available to use, and - perhaps more importantly - the presentation (design => CSS) and structure (HTML/JS) of any card could easily be overridden and adjusted without the need of 3rd party integrations like mod_card, or anything else. This should be basic functionality provided in core, where the UI needs to make a place to be able to change things directly…
2 Likes
which is today!
not sure if the above would be called badges, chips or pills, but lets all join #beta on Discord today and experiment with the new feature.
3 Likes
It’s been 31 July for 19 hours now, and no beta. Comes of being 12 hours ahead of UTC I guess…
1 Like
yeah, it’s been 10 hours here, and all we’ve seen are spoilers
btw Ive put together the instructions in Custom badge | Home Assistant Developer Docs to make this js script. However, because of the fact the js file for the editor does not exist the card wont get created.
Ive commented the import line and that makes the bare metal card appear, albeit not in an editor/card-picker ofc.
if anyone cares to join me on this, please do, maybe we can create something of it in this beta cycle
I’ve opened a repo here which is terrible as of yet, but probably easiest to cooperate on this
reading the discussion in Add new badges design with UI editor by piitaya · Pull Request #21401 · home-assistant/frontend · GitHub I see Paul mentioning this:
The old badges will always work as before. Badges are just a smaller card. You can mix them if you want
Does that mean the old badges are not deprecated at all in 2024.8?
To me it implies that they will not vanish but will adopt the new look
1 Like
I think, this approach would have been possible, if they would have gone for a “grid based” dashboard - and not a section based one.
i don’t see, how this should work with the sections…
Probably I dont get it, because why then mention the cards will be different in appearance
I have recently taken a look at how to apply custom theming and came to the conclusion i have no idea what shadowRoots are and how to approach redesigning to fit my needs. I want to get rid of so much padding and rounded corners. I would have no trouble styling it all with plain css but it looks like I cannot do that (?yet ? with my knowledge?).
This is me fiddling with the dev tools. But applying this is to a theme is hard. Then you look into card-mod only to find out 2024.7 broke it. So I don’t want to rely on 3rd party code I can’t fix (compared to my custom css). I just hate the default paddings, margins, gaps AND todays roundness of everything and everywhere. All of these using css variables would be great.
Thank you for taking the time to answer some questions.
Your answer here is however not directly answering me: I’m in the present. You are in a hypothetical future. What I’m asking for is a migration path for existing users of the old badges. It would’ve been great, since you have the code, to release the old badges in e.g. HACS as part of the new release.
2 Likes
Here’s the theming page from the documentation, that should give you more insight:
As a suggestion: take a look at a theme, that is already available and change it to your liking. In the end it’s always a *.css file. 
As you seem to be using Mushroom with the square theme, just take this as your starting point. You can find it here:
As we gradually migrate our design system, the use of design tokens should make this type of theming easier.
I mean, I like squares too. 
3 Likes
WOW! This is extremely good news! The whole UI needs a bit of rethinking and focus on customizations and flexibility. Honestly, I’m tired of making Lovelace UI look and behave the way I need with dirty hacks and poorly supported 3rd party cards.
3 Likes
Gah, I hate the look of the replacement badges. It looks like I’ll have to remove about 3/4s of them on my dashboard so it doesn’t look like rubbish on the mobile dashboard. FAR TOO WIDE. I liked the circular arrangement, with a single word of metadata on the bottom. I hope that someone can provide a HACS converter to convert my badges back to badges. Until then I guess I’m stuck on 2024.7. Ah well.
3 Likes
so do I!
But Tiles are giving us a hard time… have Tile card containers and buttons follow HA border-radius theme variable · home-assistant/frontend · Discussion #21357 · GitHub
would be magic of we could set just 1 --tile-border-radius variable for that, in stead of having to card-mod each and every Tile type card for its specific feature properties