# Button group nodes / no change of states

**URL:** <https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [11 February 2025 21:57 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333 "2025-02-11T21:57:58Z")\
**Posts on this page:** 1\
**Showing post:** 13

<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 February 2025 07:43 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/13 "2025-02-18T07:43:05Z")

</div>

Even it is a bug, (claimed that the html in label is supported) I don't think it is proper way to do the thing.

As the look and feel is mainly CSS, the tools should follow accordingly.  
And as I do understand you wanted to change the default look/behavior as the icons should have different colors, not the background of the button.

It definitely can be done with CSS.

```auto
[{"id":"c8955d08c31d2d8a","type":"ui-button-group","z":"9ab81d258b54a577","name":"","group":"6edff2fa2f5c6296","order":1,"width":6,"height":1,"label":"","className":"btn-grp-colored-icons","rounded":true,"useThemeColors":true,"passthru":false,"options":[{"label":"","icon":"lightbulb-on mdi-36px","value":"option_0","valueType":"str","color":"#ffa942"},{"label":"","icon":"lightbulb-on mdi-36px","value":"option_1","valueType":"str","color":"#999999"},{"label":"","icon":"lightbulb-on mdi-36px","value":"option_2","valueType":"str","color":"#ff6666"},{"label":"","icon":"lightbulb-on mdi-36px","value":"option_3","valueType":"str","color":"#009999"},{"label":"","icon":"lightbulb-on mdi-36px","value":"option_4","valueType":"str","color":"#cccc00"},{"label":"","icon":"lightbulb-on mdi-36px","value":"option_5","valueType":"str","color":"#ff33cc"}],"topic":"topic","topicType":"msg","x":630,"y":1600,"wires":[[]]},{"id":"ebcb7d50d3fa2bb2","type":"ui-template","z":"9ab81d258b54a577","group":"","page":"","ui":"cf21e7dda9e29be4","name":"","order":0,"width":0,"height":0,"head":"","format":".btn-grp-colored-icons button[value=\"option_0\"] i{\n color:rgb(255, 169, 86);\n}\n.btn-grp-colored-icons button[value=\"option_1\"] i{\n color:rgb(255, 207, 163);\n}\n.btn-grp-colored-icons button[value=\"option_2\"] i{\n color:rgb(255, 232, 214);\n}\n.btn-grp-colored-icons button[value=\"option_3\"] i{\n color:rgb(255, 255, 255);\n}\n.btn-grp-colored-icons button[value=\"option_4\"] i {\n color: rgb(223, 231, 255);\n}\n.btn-grp-colored-icons button[value=\"option_5\"] i {\n color: rgb(203, 219, 255);\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":620,"y":1560,"wires":[[]]},{"id":"6edff2fa2f5c6296","type":"ui-group","name":"multiswitch","page":"b76e6ae7a7b504b6","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"cf21e7dda9e29be4","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"b76e6ae7a7b504b6","type":"ui-page","name":"Colors","ui":"cf21e7dda9e29be4","path":"/page1","icon":"home","layout":"grid","theme":"cbe751f3fb4f230f","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"6"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"cbe751f3fb4f230f","type":"ui-theme","name":"JJ_Dark","colors":{"surface":"#2c5168","primary":"#585858","bgPage":"#121212","groupBg":"#212121","groupOutline":"#424242"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

_[View the full topic](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333)._