A simple example of a button that has two states and changes colour/text and icon based on those two states [{"id":"b9a70965.13e138","type":"ui_button","z":"d511095d.512808","name":"","group":"c070ecdb.6d5ce","order":0,"width":"0","height":"0","passthru":false,"label":"{{payload}}","color":"","bgco…

my original example at the top still works - so maybe you need to share your flow so we can try to work out what is wrong ?

This is my current flow [{"id":"64ac3933.070e88","type":"change","z":"24d531e9.e46a1e","name":"","rules":[{"t":"set","p":"colour","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":435,"y":102,"wires":[["9daa42d6.ac744"]]},{"id":"2a508b1c.199094","typ…

it looks like you are not using node-red-dashboard but another dashboard. The example provided works with node-red-dashboard. If you want to use node-red-dashboard, you will first have to remove the other dashboard.

Hi @dceejay I was searching for a code like yours. Sadly I am a bit lost with the thing I want to accomplish. I am rather new to Node Red. I am using it to make a dashboard for my Homey home automation. I would like to make buttons instead of switches. I like the way they look, more tile like. I …

It is hard to tell if or what you are doing wrong based on what you shared. Button colors by state of something you can find in this example also. https://flows.nodered.org/flow/cd90709d95fcba9970bd88205871c3c7

Hi @hotNipi , Thanks for your reply. What I like to accomplish is a button to turn my lights in the living room on and off. The button should reflect the state it is in. For example, lights on button is green with a nice bulb icon that is on. Lights off the button is red with a bulb icon that is off…

There is one old thread also about this, may be it helps [image] A little bit of a flow that others may like Dashboard no probs - we are all learning all the time - here’s a useful link. http://commonmark.org/help/

Hi @hotNipi , Aaaargghhg, getting a bit frustrated here :crazy_face: Tried the code in the post you gave, tried the above code, searched for other solutions but it is still not working. The best I could get is that my light turns off. So, not on again and no representation if I turn it on/off throu…

Share the flow with your best try. Let's try to fix it. :slight_smile:

@hotNipi Thanks! This is what I have now. My light goes off when I press the button. On next press it does not go on. If I press the button in my home automation app the button does not show the state of the light. [{"id":"9e1e78a2.63f928","type":"ui_button","z":"e185900c.bdc37","name":"on/off","g…

Node-RED

Node-RED Forum

Examples of Colour change button and switch

FAQs

hotNipi 16 December 2019 13:11 25

There is one old thread also about this, may be it helps

Topic		Replies	Views
Dashboard 2 - is there a simple way to configure button so that it toggles Dashboard	13	623	24 September 2024
CSS Styling ui-button Widgets on Dashboard 2 Share Your Projects dashboard-2	18	3056	6 December 2024
Change icon color by message Dashboard node-red-dashboard	26	4790	17 January 2022
How To Modify Dashboard Button To Alternate Color / Text? Dashboard	9	6402	23 September 2021
Problem changing button colors General node-red-dashboard , function-node	24	492	4 August 2025

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Examples of Colour change button and switch

Related topics