Hell everyone,
This is picture of a native entities card with a toggle-switch button. The kind of toggle-switch that is used everywhere in Home Assistant :
Is there an easy way to include such a toggle-switch button in a Tile card, or mushroom template or even bubble-card ?
I must miss something as all my tries end-up with lots of card_mod CSS tweaks. It seems an overkill.
Thanks for your help & ideas
Note that in 2025.3 you can see a similar switch on the Tile card for “toggleable” entities.
post by mistake. sorry
This is the toggle feature in the Tile Card
features:
- type: toggle
type: tile
features_position: inline
vertical: false
entity: light.pc_lights
That is the new “feature” PR I was waiting for in the Tile card! For some reason I could not see it.
After HA restart it is available and I can have this now.
Huuuuuge button !
You can adjust the size with card_mod
features:
- type: toggle
type: tile
features_position: inline
vertical: false
entity: light.pc_lights
card_mod:
style:
hui-card-features $:
hui-card-feature $:
hui-toggle-card-feature $:
ha-control-switch$: |
.switch {
width: 50% !important;
left: 100px !important;
}
I was going to ask if someone knows ho to tweak the size. Thanks !
I did this to also change height and keep vertically centered
card_mod:
style:
hui-card-features $:
hui-card-feature $:
hui-toggle-card-feature $:
ha-control-switch$: |
.switch {
width: 50% !important;
height: 70% !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(0%,-50%)
}
I just provided a quick example. Edit away!!!
BTW, is there a place other than the source code to find out which CSS targets to tweak ?
Code Inspector