# Examples of Colour change button and switch

**URL:** <https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650>\
**Category:** FAQs\
**Created:** [3 October 2018 08:24 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650 "2018-10-03T08:24:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 October 2018 08:24 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/1 "2018-10-03T08:24:07Z")

</div>

A simple example of a button that has two states and changes colour/text and icon based on those two states

```auto
[{"id":"b9a70965.13e138","type":"ui_button","z":"d511095d.512808","name":"","group":"c070ecdb.6d5ce","order":0,"width":"0","height":"0","passthru":false,"label":"{{payload}}","color":"","bgcolor":"{{colour}}","icon":"","payload":"press","payloadType":"str","topic":"","x":590,"y":615,"wires":[["48aaee20.8d9e1"]]},{"id":"5cc84101.ac6d9","type":"change","z":"d511095d.512808","name":"","rules":[{"t":"set","p":"colour","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"<i class=\"fa fa-rotate-90 fa-folder-open-o\"></i> OPEN","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":570,"wires":[["b9a70965.13e138"]]},{"id":"329e773b.0fdcb8","type":"inject","z":"d511095d.512808","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":215,"y":570,"wires":[["bc5a70e.6f6a29"]]},{"id":"48aaee20.8d9e1","type":"function","z":"d511095d.512808","name":"state","func":"var state = context.state || false;\nstate = !state;\ncontext.state = state;\nif (state) { return [msg,null]; }\nelse { return [null,msg]; }\n","outputs":2,"noerr":0,"x":215,"y":615,"wires":[["5cc84101.ac6d9"],["bc5a70e.6f6a29"]]},{"id":"bc5a70e.6f6a29","type":"change","z":"d511095d.512808","name":"","rules":[{"t":"set","p":"colour","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"<i class=\"fa fa-rotate-90 fa-folder-o\"></i> Closed","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":615,"wires":[["b9a70965.13e138"]]},{"id":"c070ecdb.6d5ce","type":"ui_group","z":"d511095d.512808","name":"Click","tab":"7d974e73.cf8f9","order":1,"disp":true,"width":"5"},{"id":"7d974e73.cf8f9","type":"ui_tab","z":"d511095d.512808","name":"Home","icon":"link","order":1}]

```

And similarly for the switch widget

```auto
[{"id":"e5b337f.ddf04c8","type":"inject","z":"d511095d.512808","name":"","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":true,"onceDelay":"","x":200,"y":705,"wires":[["dcbbf896.32fb28"]]},{"id":"695a1cfd.452994","type":"ui_switch","z":"d511095d.512808","name":"","label":"{{label}}","group":"ccbdd82d.3c19b8","order":0,"width":0,"height":0,"passthru":false,"decouple":"true","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-sun-o","oncolor":"red","offvalue":"false","offvalueType":"bool","officon":"fa-cloud","offcolor":"grey","x":590,"y":705,"wires":[["7926b21b.c61b6c"]]},{"id":"7926b21b.c61b6c","type":"delay","z":"d511095d.512808","name":"","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":600,"y":750,"wires":[["b797b90b.f62108"]]},{"id":"dcbbf896.32fb28","type":"change","z":"d511095d.512808","name":"","rules":[{"t":"set","p":"label","pt":"msg","to":"click for on","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":750,"wires":[["695a1cfd.452994"]]},{"id":"b797b90b.f62108","type":"switch","z":"d511095d.512808","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":200,"y":750,"wires":[["d3cd1f2c.519bd"],["dcbbf896.32fb28"]]},{"id":"d3cd1f2c.519bd","type":"change","z":"d511095d.512808","name":"","rules":[{"t":"set","p":"label","pt":"msg","to":"now turn off","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":705,"wires":[["695a1cfd.452994"]]},{"id":"ccbdd82d.3c19b8","type":"ui_group","z":"","name":"Default","tab":"7d974e73.cf8f9","order":3,"disp":true,"width":"6","collapse":false},{"id":"7d974e73.cf8f9","type":"ui_tab","z":"d511095d.512808","name":"Home","icon":"link","order":1}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 October 2018 08:44 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/2 "2018-10-03T08:44:12Z")

</div>

It's a nice example! By using this a lot by now I have noticed a minor bug.  
If you change button background color this way, the button hover state (with animations) will be lost.  
It's of course nothing special but for design geeks ... you never know 😃

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 October 2018 08:56 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/3 "2018-10-03T08:56:43Z")

</div>

For design geeks - they would start with a different dashboard !

(improvement suggestions welcome)

---

<div class="post-metadata">

**Author:** ![GChapo](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GChapo](https://discourse.nodered.org/u/GChapo)\
**Post date:** [3 October 2018 09:44 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/4 "2018-10-03T09:44:11Z")

</div>

I really like this.

You used fa fa-rotate-90 fa-folder-open-o & closed. Are there other icons available and if so what is available please?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 October 2018 09:45 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/5 "2018-10-03T09:45:38Z")

</div>

As the info for the button widget says...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/53be2d92246a670a810f2a03e4f8e34cb6984b1d.png)

(\* only Fa-icons 4.7)

---

<div class="post-metadata">

**Author:** ![GChapo](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@GChapo](https://discourse.nodered.org/u/GChapo)\
**Post date:** [3 October 2018 09:47 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/6 "2018-10-03T09:47:41Z")

</div>

Nice one!

Thanks

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 October 2018 22:10 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/10 "2018-10-03T22:10:09Z")

</div>

> [@dceejay](#):
>
> For design geeks - they would start with a different dashboard !

Well the basis of default set of dashboard widgets is not that bad to not give it a try. For me (miles from being a design geek 😃 ), the CSS has always been that famous "never properly closing window blinds". No mater that, with slight override of default CSS, I managed to get my dashboard to look quite ok without wasting too much time on it. So It has it's powers. That's for sure.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a1d27540053863d145fc73742b2f8cef19ce84b5.jpeg)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [3 October 2018 22:16 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/11 "2018-10-03T22:16:56Z")

</div>

Oh dear... just when I thought I'd created a nice control dashboard - [Using switch node to show actual state](https://discourse.nodered.org/t/using-switch-node-to-show-actual-state/3668)

@hotNipi - I'm deflated now 😥 .....

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 October 2018 22:34 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/12 "2018-10-03T22:34:14Z")

</div>

Very nice. Are any of those "slight overrides" something generalisable about the layout ? or are they "just" theming ?  
PS - sort of a pre-announcement - did you see the PR in master that allows this ? [https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets](https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets)  
testing/feedback appreciated before it goes out.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 October 2018 22:55 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/13 "2018-10-03T22:55:12Z")

</div>

Theming with CSS override on backgrounds and buttons and sliders simple widgets. Default gauges and graphs can't be modified with ease so I created some own widgets. They are done with ui\_template by using svg elements.  
I definitely will explore the [Creating-New-Dashboard-Widgets](https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets). The idea itself is promising enough 🙂

Cheers

---

<div class="post-metadata">

**Author:** ![luisgcu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/luisgcu/32/4549_2.png) [@luisgcu](https://discourse.nodered.org/u/luisgcu)\
**Post date:** [17 November 2018 18:06 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/14 "2018-11-17T18:06:22Z")

</div>

Hi @hotNipi what I nice dashboard , I trying to learn on how to do something similar like you did, is possible to get sample code of what you did ?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [18 November 2018 15:53 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/15 "2018-11-18T15:53:14Z")

</div>

Here is how I did it.

1. Make full working solution of dashboard, using default settings and default dashboard widgets.

2. Observe the result with all the devices, you will be using it.

3. Figure out the best layout for elements as there will be one layout for all devices. (unit size, card sizes ....)

4. Make the list of the problems you need to solve with custom design. (Colors, fonts, sizes, behavior and look of elements, readability issues ....)

5. Open your dashboard and explore all the elements with browser dev tools. (same time you may need to educate yourself on topic of html, css, angular... [https://www.w3schools.com/](https://www.w3schools.com/))

6. Place ui\_template node somewhere in your project and make sure it is configured like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2ba483b46fecc7b7101130dcf72bf3d5894087de.png)

7. Place`<style>` tags in it and start overriding all you dont like on your dashboard. Don't miss the thing.

8. Show us the result 🙂

If some element does not give up and does not look as you might like, ask specific questions here and for sure you'll get help.

Happy styling 🙂

---

<div class="post-metadata">

**Author:** ![learning](https://avatars.discourse-cdn.com/v4/letter/l/5daacb/32.png) [@learning](https://discourse.nodered.org/u/learning)\
**Post date:** [24 July 2019 18:26 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/16 "2019-07-24T18:26:56Z")

</div>

@dceejay I came across this post thinking this was exactly what I need but it does not seem to work for me. I am trying to change the button color when the button is clicked and then when another button is pressed, change it back to the original color. I realize that is a little complicated so I am starting with just changing the button color with each click. I copied the flow you provided and changed it to what I needed and my button is just the original default color and does not change when pressed.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [24 July 2019 18:50 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/17 "2019-07-24T18:50:41Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![learning](https://avatars.discourse-cdn.com/v4/letter/l/5daacb/32.png) [@learning](https://discourse.nodered.org/u/learning)\
**Post date:** [24 July 2019 19:00 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/18 "2019-07-24T19:00:42Z")

</div>

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","type":"inject","z":"24d531e9.e46a1e","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":240,"y":102,"wires":[["2c2ce824.67da08"]]},{"id":"17b67eb3.7e2151","type":"function","z":"24d531e9.e46a1e","name":"state","func":"var state = context.state || false;\nstate = !state;\ncontext.state = state;\nif (state) { return [msg,null]; }\nelse { return [null,msg]; }\n","outputs":2,"noerr":0,"x":240,"y":147,"wires":[["64ac3933.070e88"],["2c2ce824.67da08"]]},{"id":"2c2ce824.67da08","type":"change","z":"24d531e9.e46a1e","name":"","rules":[{"t":"set","p":"colour","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":435,"y":147,"wires":[["9daa42d6.ac744"]]},{"id":"9daa42d6.ac744","type":"mui\_button","z":"24d531e9.e46a1e","name":"","group":"96a86685.14e458","order":6,"width":"3","height":"2","passthru":false,"label":"Start","tooltip":"","color":"black","bgcolor":"{{colour}}","icon":"","payload":"press","payloadType":"str","topic":"Start","x":635,"y":205,"wires":[["17b67eb3.7e2151"]]},{"id":"96a86685.14e458","type":"mui\_group","z":"","name":"Small","tab":"2d3eadc0.8c2392","order":2,"disp":false,"width":"10","collapse":false},{"id":"2d3eadc0.8c2392","type":"mui\_tab","z":"","name":"Small Screen","icon":"dashboard","order":1}]

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [24 July 2019 19:06 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/19 "2019-07-24T19:06:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![SilverApe](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@SilverApe](https://discourse.nodered.org/u/SilverApe)\
**Post date:** [15 December 2019 18:40 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/22 "2019-12-15T18:40:59Z")

</div>

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 communicate to homey through MQTT.

 ![Schermafdruk 2019-12-15 19.34.03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/54ab58bef0089b8ffd496ee5dc468ef89b15b474.png)

 ![Schermafdruk 2019-12-15 19.36.54 copy](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/73ef705d9ab187eed028fda0b3c2e817f7658ad3.png)

Can you tell me what I am doing wrong and how to solve it?  
Thanks

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [15 December 2019 19:35 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/23 "2019-12-15T19:35:59Z")

</div>

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](https://flows.nodered.org/flow/cd90709d95fcba9970bd88205871c3c7)

---

<div class="post-metadata">

**Author:** ![SilverApe](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@SilverApe](https://discourse.nodered.org/u/SilverApe)\
**Post date:** [16 December 2019 13:03 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/24 "2019-12-16T13:03:41Z")

</div>

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. The node red button should communicate with the light through MQTT (with the topic I showed, this topic works with a switch).

With my switch I use the MQTT in and MQTT out node. In my switch node I have "Pass though `msg` if payload matches new state:" checked. If I do that now my button goes crazy 😀

Do you or anyone els knows how this can be done? I used the above code but need to know how to connect the MQTT to make it work.  
The link you provided looks nice but even more complex 😅

greetings

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 December 2019 13:11 UTC](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650/25 "2019-12-16T13:11:19Z")

</div>

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

> [@A little bit of a flow that others may like](https://discourse.nodered.org/t/a-little-bit-of-a-flow-that-others-may-like/372/17):
>
> no probs - we are all learning all the time - here’s a useful link. [http://commonmark.org/help/](http://commonmark.org/help/)

[Next page](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650.md?page=2)