I just wanted to put out a new addition to my “Suite of Lovalace Plugins”.
It’s a single button control for binary devices and it’s completely theme-able (just like all of the others).
Here is basically how it looks:
Here is the post in the main thread for more info and here is the github link for all of the config details.
Is there a way to turn on icon color? As you can see in the screenshot, the bottom one is yellow, unlike the top.
I’m really not sure what actually controls that icon color.
As far as I know my plugin only controls the functioning and look of the switch portion. But its that way for all of the various plugins i’ve made so I guess something I’ve done in the code is overriding the icon color but I have no idea what it would be.
So I would probably have to say that it’s not possible at the moment.
actually I just tested a thought I had about this and it worked.
If you put in the “state_color: true” option for the individual entity row it will show the state color but only for that one entity in the card.
But it doesn’t work if you put that in the options for the whole card.
I guess using the custom row overrides the card settings for that option.
I’ll add that to the docs.
Thanks!
Love it!
thank you
i also added a 2nd row for info, as this is helpful to show “unavailable” if a plug is not working (eg. zigbee disconnected)
not sure if a better way to catch this at all?
entities:
- label: Jamie Office
type: section
- entity: switch.gaming_desk
icon: 'mdi:desktop-classic'
name: Gaming Desk
type: 'custom:toggle-control-button-row'
secondary_info: '<b style=''color:red''>[[ switch.gaming_desk.state ]]</b>'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.jamie_work_desk
icon: 'mdi:laptop'
name: Work Desk
type: 'custom:toggle-control-button-row'
secondary_info: '<b style=''color:red''>[[ switch.jamie_work_desk.state ]]</b>'
customTheme: true
isOnColor: green
isOffColor: red
- label: Hallway
type: section
- entity: switch.hallway_lamp
icon: 'mdi:lamp'
name: Hallway Lamp
type: 'custom:toggle-control-button-row'
secondary_info: '<b style=''color:red''>[[ switch.hallway_lamp.state ]]</b>'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.samsung_plug1
icon: 'mdi:power-socket-uk'
name: Upstairs Hallway Plug
type: 'custom:toggle-control-button-row'
secondary_info: '<b style=''color:red''>[[ switch.samsung_plug1.state ]]</b>'
customTheme: true
isOnColor: green
isOffColor: red
- label: Bar
type: section
- entity: switch.drinks_cabinet
icon: 'mdi:glass-cocktail'
name: Drinks Cabinet
type: 'custom:toggle-control-button-row'
secondary_info: '<b style=''color:red''>[[ switch.drinks_cabinet.state ]]</b>'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.bar_room_lamp
icon: 'mdi:floor-lamp'
name: Bar Lamp
type: 'custom:toggle-control-button-row'
secondary_info: '<b style=''color:red''>[[ switch.bar_room_lamp.state ]]</b>'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.wallplugajaxbar
icon: 'mdi:power-socket-uk'
name: Bar Wall Plug
type: 'custom:toggle-control-button-row'
secondary_info: '<b style=''color:red''>[[ switch.wallplugajaxbar.state ]]</b>'
customTheme: true
isOnColor: green
isOffColor: red
- label: Beast
type: section
- entity: switch.the_beast
icon: 'mdi:volleyball'
name: The Beast Switch
type: 'custom:toggle-control-button-row'
secondary_info: '<b style=''color:red''>[[ switch.the_beast.state ]]</b>'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.spectrum_studio_plug
icon: 'mdi:alpha-s-circle'
name: Spectrum Plug
type: 'custom:toggle-control-button-row'
secondary_info: '<b style=''color:red''>[[ switch.spectrum_studio_plug.state ]]</b>'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.wallplugajaxkitchen
icon: 'mdi:silverware-fork-knife'
name: Kitchen Plug
type: 'custom:toggle-control-button-row'
secondary_info: '<b style=''color:red''>[[ switch.wallplugajaxkitchen.state ]]</b>'
customTheme: true
isOnColor: green
isOffColor: red
show_header_toggle: false
title: Home Switches
type: entities
actually, this is maybe better?
entities:
- label: Jamie Office
type: section
- entity: switch.gaming_desk
icon: 'mdi:desktop-classic'
name: Gaming Desk
type: 'custom:toggle-control-button-row'
secondary_info: '[[ if(switch.gaming_desk.state != "on",if(switch.gaming_desk.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.jamie_work_desk
icon: 'mdi:laptop'
name: Work Desk
type: 'custom:toggle-control-button-row'
secondary_info: '[[ if(switch.jamie_work_desk.state != "on",if(switch.jamie_work_desk.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
customTheme: true
isOnColor: green
isOffColor: red
- label: Hallway
type: section
- entity: switch.hallway_lamp
icon: 'mdi:lamp'
name: Hallway Lamp
type: 'custom:toggle-control-button-row'
secondary_info: '[[ if(switch.hallway_lamp.state != "on",if(switch.hallway_lamp.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.samsung_plug1
icon: 'mdi:power-socket-uk'
name: Upstairs Hallway Plug
type: 'custom:toggle-control-button-row'
secondary_info: '[[ if(switch.samsung_plug1.state != "on",if(switch.samsung_plug1.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
customTheme: true
isOnColor: green
isOffColor: red
- label: Bar
type: section
- entity: switch.drinks_cabinet
icon: 'mdi:glass-cocktail'
name: Drinks Cabinet
type: 'custom:toggle-control-button-row'
secondary_info: '[[ if(switch.drinks_cabinet.state != "on",if(switch.drinks_cabinet.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.bar_room_lamp
icon: 'mdi:floor-lamp'
name: Bar Lamp
type: 'custom:toggle-control-button-row'
secondary_info: '[[ if(switch.bar_room_lamp.state != "on",if(switch.bar_room_lamp.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.wallplugajaxbar
icon: 'mdi:power-socket-uk'
name: Bar Wall Plug
type: 'custom:toggle-control-button-row'
secondary_info: '[[ if(switch.wallplugajaxbar.state != "on",if(switch.wallplugajaxbar.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
customTheme: true
isOnColor: green
isOffColor: red
- label: Beast
type: section
- entity: switch.the_beast
icon: 'mdi:volleyball'
name: The Beast Switch
type: 'custom:toggle-control-button-row'
secondary_info: '[[ if(switch.the_beast.state != "on",if(switch.the_beast.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.spectrum_studio_plug
icon: 'mdi:alpha-s-circle'
name: Spectrum Plug
type: 'custom:toggle-control-button-row'
secondary_info: '[[ if(switch.spectrum_studio_plug.state != "on",if(switch.spectrum_studio_plug.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.wallplugajaxkitchen
icon: 'mdi:silverware-fork-knife'
name: Kitchen Plug
type: 'custom:toggle-control-button-row'
secondary_info: '[[ if(switch.wallplugajaxkitchen.state != "on",if(switch.wallplugajaxkitchen.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
customTheme: true
isOnColor: green
isOffColor: red
show_header_toggle: false
title: Home Switches
type: entities
I haven’t released it yet (I really should…) but that was a feature request that I had and it’s been released in the dev branch. And it seems to be working so if you want to try to run that version to see how you like it then it would be appreciated.
If the state is “unavailable” it will be greyed out an the text will show “unav”.
awesome!
I will stick with this for now as works well and just take the release when available 
It’s available in HACS now.
But I had a request to change the text. It’s now N/A if the entity is unavailable.
works great!
im playing around with the secondary info side of things, does this allow a value to be added to it?
eg. if you have a switch thats current “on” - show the current consumption from the attirbutes?
or would i need to use another plugin for this
I honestly don’t know is the two can be used together. I’ve never tried it.
I found out just recently that the “state_color” option works with all of my plugins so the secondary info might also.
i played around and doesnt seem to take it, im afraid
It will use the standard entities card secondary_info but I can’t work out a way to nest custom entity rows.
so something like this works:
- type: custom:toggle-control-button-row
entity: light.computer_room_ceiling_light
secondary_info: last-changed
But you cant use attributes.
yep I have this, which works really well and looks great.
I wanted to pass in the value (current voltage) but i couldnt work that side of it out
entities:
- label: Jamie Office
type: section
- entity: switch.gaming_desk
icon: 'mdi:desktop-classic'
name: Gaming Desk (TP Link)
type: 'custom:toggle-control-button-row'
secondary_info: >-
[[ if(switch.gaming_desk.state != "on",if(switch.gaming_desk.state !=
"off",<b style='color:red'>Switch Not Working</b> ,<b
style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
Working</b>) ]]
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.jamie_work_desk
icon: 'mdi:laptop'
name: Work Desk (TP Link)
type: 'custom:toggle-control-button-row'
secondary_info: >-
[[ if(switch.jamie_work_desk.state != "on",if(switch.jamie_work_desk.state
!= "off",<b style='color:red'>Switch Not Working</b> ,<b
style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
Working</b>) ]]
customTheme: true
isOnColor: green
isOffColor: red
- label: Hallway
type: section
- entity: switch.hallway_lamp
icon: 'mdi:lamp'
name: Hallway Lamp (TP Link)
type: 'custom:toggle-control-button-row'
secondary_info: >-
[[ if(switch.hallway_lamp.state != "on",if(switch.hallway_lamp.state !=
"off",<b style='color:red'>Switch Not Working</b> ,<b
style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
Working</b>) ]]
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.samsung_plug1
icon: 'mdi:power-socket-uk'
name: Upstairs Hallway Plug (Zigbee)
type: 'custom:toggle-control-button-row'
secondary_info: >-
[[ if(switch.samsung_plug1.state != "on",if(switch.samsung_plug1.state !=
"off",<b style='color:red'>Switch Not Working</b> ,<b
style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
Working</b>) ]]
customTheme: true
isOnColor: green
isOffColor: red
- label: Bar
type: section
- entity: switch.drinks_cabinet
icon: 'mdi:glass-cocktail'
name: Drinks Cabinet (TP Link)
type: 'custom:toggle-control-button-row'
secondary_info: >-
[[ if(switch.drinks_cabinet.state != "on",if(switch.drinks_cabinet.state
!= "off",<b style='color:red'>Switch Not Working</b> ,<b
style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
Working</b>) ]]
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.bar_room_lamp
icon: 'mdi:floor-lamp'
name: Bar Lamp (TP Link)
type: 'custom:toggle-control-button-row'
secondary_info: >-
[[ if(switch.bar_room_lamp.state != "on",if(switch.bar_room_lamp.state !=
"off",<b style='color:red'>Switch Not Working</b> ,<b
style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
Working</b>) ]]
customTheme: true
isOnColor: green
isOffColor: red
- entity: switch.wallplugajaxbar
icon: 'mdi:power-socket-uk'
name: Bar Wall Plug (TP Link)
type: 'custom:toggle-control-button-row'
secondary_info: >-
[[ if(switch.wallplugajaxbar.state != "on",if(switch.wallplugajaxbar.state
!= "off",<b style='color:red'>Switch Not Working</b> ,<b
style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
Working</b>) ]]
customTheme: true
isOnColor: green
isOffColor: red
- label: Other Plugs
type: section
- entity: switch.wallplugajaxkitchen
icon: 'mdi:silverware-fork-knife'
name: Kitchen Plug (Zigbee)
type: 'custom:toggle-control-button-row'
secondary_info: >-
[[ if(switch.wallplugajaxkitchen.state !=
"on",if(switch.wallplugajaxkitchen.state != "off",<b
style='color:red'>Switch Not Working</b> ,<b style='color:green'>Switch
Working</b>) ,<b style='color:green'>Switch Working</b>) ]]
customTheme: true
isOnColor: green
isOffColor: red
show_header_toggle: true
title: Home Switches
type: entities
Is it possible to set isOnColor to the rgb color of the current light?
I tried this but it stays as the default blueish/green
- type: 'custom:toggle-control-button-row'
name: Address Lights
entity: light.address_lights
customTheme: true
icon: 'mdi:numeric'
isOnColor: '{{ state_attr("light.address_lights","rgb_color") }}'
no sorry the card doesn’t accept templates. And I really don’t think it ever will at least on my end.
But there might be some custom plugins that might do it.
Maybe 📝 100% Templatable Lovelace Configurations
Or https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card
Otherwise, my best advice is to look thru HACS to see if something there might work.
I’ve never tried to use anything like those in my cards so I’m not sure if they would work or not.
Thank you, I appreciate the response!
I’ll keep playing around with things and do enjoy the plugin as is 
This looks great. Im not sure if im being silly or is there a way to specify it being a toggle switch rather than on/off button?
I’m not sure what you mean.
it already is a toggle. if you push the button and the entity is on then it turns it off and that state is reflected in the display. and the opposite is true so that if the entity is off then pushing it turns it on.
Apologies, i didnt word my question too well. In your first post screenshots, “bool Test” has the toggle as showing “off” where as “Spare 16” is a simple toggle switch design which i’d prefer