Sometimes you just want something simple. Like a power button that looks nice, to toggle a device at home. You just want a plain round button. Suppose you have this:
And you want this:
It’s almost like a chips card, but being an entity card, it can toggle things and it will show the state with color. It’s also more ergonomic on a phone than a chips card. Awesome.
Hey, while trying your code, I found out that it didn’t account for padding when using a theme.
After addressing this, I made some more changes:
No need for a custom:mod-card and grid card, instead it is just applied as a style within the custom:mushroom-entity-card, custom:mushroom-light-card and other cards that use the mushroom-shape-icon element.
I also kept kept the mushroom card itself as a background behind the mushroom-shape-icon, as the mushroom-shape-icon is usually transparent resulting in the underlying background being visible through the shape-icon.
I added box-shadow functionality taking style variables from the theme.
I added a dynamic border style, using the state color, taking style variables from the theme.
I added a small margin at the bottom of each card, because I want to use them as side buttons.
In my example I have added 2 light groups in a vertical stack, to display the difference when using state color.
Default theme:
Custom theme with box shadow, without border and with a purple background:
I’ll just add the simplest of configurations to remove everything around the button of a mushroom card here. Depending on your usecase, building this into a part of something bigger might be easier with this base-config.
The fill-container and layout tags make the button centered in whatever grid/stack/… you stick it:
Sadly that doesn’t work correctly because the card info still shows up (with a label of " " as set in the name) which makes the “button” not square (more space to the right of the icon than to the left).
The following is necessary to make it work so the button is perfectly square:
....
style: |
ha-card {
// clear out borders and backgrounds
border: unset;
background: unset;
}
ha-card ha-tile-info {
// make info 0 px so it takes literally zero horizontal space
width: 0px;
// display: none makes the button shrink in height, no bueno
}
ha-card .info {
// remove left padding from info
padding-left: 0px;
}
...
Ah… that makes sense. I wasn’t worred about it being perfectly square and was repositioning it anyway.
See the result for two button in the top right here.
It’s surprising that there isn’t a more efficient method to delete labels from HA cards.
