# 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:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)
#### Post date: [11 February 2025 21:57 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/1 "2025-02-11T21:57:58Z")

</div>

Hi all,

I have found an issue I think.

Feeding the button group node with an msg.ui\_update as follows (from a function node). All is working fine (appearance, ouput). But the button states only change after a refresh of the page (i.e. F5). To be more precise: The recent pushed button does not get highlighted. What am I doing wrong ?

```auto
msg.ui_update = {
    options: [
        {
            "value": "1",
        "label": "<div style='background-color: rgb(255, 169, 86); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 169, 86, 0.8), 0px 0px 40px rgba(255, 169, 86, 0.5);'> </div>"
        },
        {
            "value": "2",
            "label": "<div style='background-color: rgb(255, 207, 163); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 207, 163, 0.8), 0px 0px 40px rgba(255, 207, 163, 0.5);'> </div>"
        },
        {
            "value": "3",
            "label": "<div style='background-color: rgb(255, 232, 214); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 232, 214, 0.8), 0px 0px 40px rgba(255, 232, 214, 0.5);'> </div>"
        },
        {
            "value": "4",
            "label": "<div style='background-color: rgb(255, 255, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8), 0px 0px 40px rgba(255, 255, 255, 0.5);'> </div>"
        },
        {
            "value": "5",
            "label": "<div style='background-color: rgb(223, 231, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(223, 231, 255, 0.8), 0px 0px 40px rgba(223, 231, 255, 0.5);'> </div>"
        },
        {
            "value": "6",
            "label": "<div style='background-color: rgb(203, 219, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(203, 219, 255, 0.8), 0px 0px 40px rgba(203, 219, 255, 0.5);'> </div>"
        }
    ]
};

return msg;

```

Thank you...

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [12 February 2025 09:26 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/2 "2025-02-12T09:26:23Z")

</div>

Could you export and paste here a flow with an inject node, your function node, and the button group node so it is easy for us the test with the button configured the correct way?

---

<div class="post-metadata">

### Author: ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)
#### Post date: [12 February 2025 23:37 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/3 "2025-02-12T23:37:51Z")

</div>

Sure... Here you go:

```auto
[
    {
        "id": "4f44d363aed65af7",
        "type": "function",
        "z": "d219a270aa9d8c20",
        "name": "assign values & labels",
        "func": "msg.ui_update = {\n options: [\n {\n \"value\": \"1\",\n \"label\": \"<div style='background-color: rgb(255, 169, 86); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 169, 86, 0.8), 0px 0px 40px rgba(255, 169, 86, 0.5);'> </div>\"\n },\n {\n \"value\": \"2\",\n \"label\": \"<div style='background-color: rgb(255, 207, 163); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 207, 163, 0.8), 0px 0px 40px rgba(255, 207, 163, 0.5);'> </div>\"\n },\n {\n \"value\": \"3\",\n \"label\": \"<div style='background-color: rgb(255, 232, 214); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 232, 214, 0.8), 0px 0px 40px rgba(255, 232, 214, 0.5);'> </div>\"\n },\n {\n \"value\": \"4\",\n \"label\": \"<div style='background-color: rgb(255, 255, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8), 0px 0px 40px rgba(255, 255, 255, 0.5);'> </div>\"\n },\n {\n \"value\": \"5\",\n \"label\": \"<div style='background-color: rgb(223, 231, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(223, 231, 255, 0.8), 0px 0px 40px rgba(223, 231, 255, 0.5);'> </div>\"\n },\n {\n \"value\": \"6\",\n \"label\": \"<div style='background-color: rgb(203, 219, 255); width: 40px; height: 40px; border-radius: 50%; border: none; box-shadow: 0px 0px 20px rgba(203, 219, 255, 0.8), 0px 0px 40px rgba(203, 219, 255, 0.5);'> </div>\"\n }\n]\n};\n\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 410,
        "y": 2170,
        "wires": [
            [
                "fd3a8eebc367fc1f"
            ]
        ]
    },
    {
        "id": "10f834f703f1c7dc",
        "type": "inject",
        "z": "d219a270aa9d8c20",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": "1",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 190,
        "y": 2170,
        "wires": [
            [
                "4f44d363aed65af7"
            ]
        ]
    },
    {
        "id": "fd3a8eebc367fc1f",
        "type": "ui-button-group",
        "z": "d219a270aa9d8c20",
        "name": "Whitetemps",
        "group": "5930b6568a470324",
        "order": 0,
        "width": 6,
        "height": 1,
        "label": "Whitetemps",
        "className": "",
        "rounded": true,
        "useThemeColors": false,
        "passthru": false,
        "options": [
            {
                "label": "",
                "icon": "",
                "value": "option_0",
                "valueType": "str",
                "color": "#009933"
            },
            {
                "label": "",
                "icon": "",
                "value": "option_1",
                "valueType": "str",
                "color": "#999999"
            },
            {
                "label": "",
                "icon": "",
                "value": "option_2",
                "valueType": "str",
                "color": "#ff6666"
            },
            {
                "label": "",
                "icon": "",
                "value": "option_3",
                "valueType": "str",
                "color": "#009999"
            },
            {
                "label": "",
                "icon": "",
                "value": "option_4",
                "valueType": "str",
                "color": "#cccc00"
            },
            {
                "label": "",
                "icon": "",
                "value": "option_5",
                "valueType": "str",
                "color": "#ff33cc"
            }
        ],
        "topic": "topic",
        "topicType": "msg",
        "x": 680,
        "y": 2170,
        "wires": [
            [
                "a7252d91595187f9"
            ]
        ]
    },
    {
        "id": "a7252d91595187f9",
        "type": "debug",
        "z": "d219a270aa9d8c20",
        "name": "debug 357",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 900,
        "y": 2170,
        "wires": []
    },
    {
        "id": "5930b6568a470324",
        "type": "ui-group",
        "name": "Group 3",
        "page": "a71e15af5f8a5ba8",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "a71e15af5f8a5ba8",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "14a551a96b61dade",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "a36c27e9dd58ee16",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 2,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "14a551a96b61dade",
        "type": "ui-base",
        "name": "My Dashboard 2 Next Level",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": "1",
        "showDisconnectNotification": true
    },
    {
        "id": "a36c27e9dd58ee16",
        "type": "ui-theme",
        "z": "d219a270aa9d8c20",
        "name": "Default Theme",
        "colors": {
            "surface": "#fafafa",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [13 February 2025 08:27 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/4 "2025-02-13T08:27:35Z")

</div>

@ceysa75, what does that that button group look like for you?

Because for me it looks like this, which does seem sub-optimal.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6fab7347a33c4747dce21fa20a4c8c176ca736fb.png)

---

<div class="post-metadata">

### Author: ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)
#### Post date: [13 February 2025 08:33 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/5 "2025-02-13T08:33:12Z")

</div>

Oh, that's strange. This is how it appears in my case:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/7/77c986d3c95db27adb3597604b4f178685ea48fd.png)

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [13 February 2025 08:45 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/6 "2025-02-13T08:45:49Z")

</div>

I'm working on a rather out of date version of db2. Let me update everything...

OK, now I see what you see...

Your button group is set to use colours from the config so the active button has inline styling, eg for the first button

```auto
height: auto; background-color: rgb(0, 153, 51); color: rgb(255, 255, 255); caret-color: rgb(255, 255, 255);

```

Your function also sends inline styling via msg.ui\_update, which clearly overrides it.

```auto
<div style='background-color: rgb(255, 169, 86);

```

I think you are facing the same problem as others have raised: msg.ui\_update changes are very persistent, so once your function has fired, the inline styling for a clicked button won't override it.

If you have a limited and fixed range of button colours, _maybe_ you can get around it by specifying classes for your buttons and styling them in a CSS template.

```auto
<div class="4000K">

```

Also: would it be simpler to work on the button icon rather than putting a coloured circle in the label?  
You can make the icon larger with --v-icon-size-multiplier, and presumably change the colour.

---

<div class="post-metadata">

### Author: ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)
#### Post date: [13 February 2025 13:13 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/7 "2025-02-13T13:13:16Z")

</div>

Thank you for the clarification. And escpecially for the tips and hints. Actually I am just testing the Dashboard 2 environment.

> [@jbudd](#):
>
> I think you are facing the same problem as others have raised: msg.ui\_update changes are very persistent, so once your function has fired, the inline styling for a clicked button won't override it.

OK, I understood. Seems to be an ongoing discussion (too technical for me, thus, I am afraid I cannot contribute something reasonable). Anyway, can live without injecting msg.ui\_update at the moment. It also works if I enter my stuff into the node directly (then I have no issues).

While we are at it: When disabling the button group node (msg.enable = false) then the row gets disabled. However, the button highlighted before remains highlighted, even if somewhat greyed out). Any hints to 'un-highlight' all buttons ?

Regards

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [13 February 2025 13:20 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/8 "2025-02-13T13:20:03Z")

</div>

Does sending an empty string payload to the button work?

---

<div class="post-metadata">

### Author: ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)
#### Post date: [13 February 2025 14:05 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/9 "2025-02-13T14:05:02Z")

</div>

Heey. That's great. That worked! Thank you

---

<div class="post-metadata">

### Author: ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)
#### Post date: [17 February 2025 21:25 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/10 "2025-02-17T21:25:46Z")

</div>

BTW, found the same behavior now even without msg.ui\_update. Simply using html in the label field leads to the sitution that once a button is highlighted it remains higlighted. Just a refresh with F5 shows the recently pushed button. See my entries below:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/7/f7802730f042ab75594987236d55c3549afa9db6.png)

---

<div class="post-metadata">

### Author: ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)
#### Post date: [17 February 2025 21:41 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/11 "2025-02-17T21:41:10Z")

</div>

For further explanation:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a79bb837ee70f13f6d7f4285688b852aac352eb5.png)

And here is the respective flow:

```auto
[
    {
        "id": "9bc46b95c1b328f6",
        "type": "ui-button-group",
        "z": "7845132b7bdf9787",
        "name": "",
        "group": "6edff2fa2f5c6296",
        "order": 1,
        "width": 6,
        "height": 1,
        "label": "",
        "className": "",
        "rounded": true,
        "useThemeColors": true,
        "passthru": false,
        "options": [
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(255, 169, 86);\"></span>",
                "icon": "",
                "value": "option_0",
                "valueType": "str",
                "color": "#009933"
            },
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(255, 207, 163);\"></span>",
                "icon": "",
                "value": "option_1",
                "valueType": "str",
                "color": "#999999"
            },
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(255, 232, 214);\"></span>",
                "icon": "",
                "value": "option_2",
                "valueType": "str",
                "color": "#ff6666"
            },
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(255, 255, 255);\"></span>",
                "icon": "",
                "value": "option_3",
                "valueType": "str",
                "color": "#009999"
            },
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(223, 231, 255);\"></span>",
                "icon": "",
                "value": "option_4",
                "valueType": "str",
                "color": "#cccc00"
            },
            {
                "label": "<span class=\"mdi mdi-lightbulb-on mdi-36px\" style=\"color: rgb(203, 219, 255);\"></span>",
                "icon": "",
                "value": "option_5",
                "valueType": "str",
                "color": "#ff33cc"
            }
        ],
        "topic": "topic",
        "topicType": "msg",
        "x": 450,
        "y": 140,
        "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": "b76e6ae7a7b504b6",
        "type": "ui-page",
        "name": "Colors",
        "ui": "14a551a96b61dade",
        "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": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "14a551a96b61dade",
        "type": "ui-base",
        "name": "My Dashboard 2 Next Level",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": "1",
        "showDisconnectNotification": true
    },
    {
        "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"
        }
    }
]

```

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [18 February 2025 00:20 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/12 "2025-02-18T00:20:18Z")

</div>

That looks like a bug to me.  
You could try raising an issue on github.

Personally, I have no hope for the button group widget and won't use it.  
I think you are more likely to get the result you are after with a template, perhaps including multiple vue buttons.

---

<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"}}]

```

---

<div class="post-metadata">

### Author: ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)
#### Post date: [18 February 2025 14:03 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/14 "2025-02-18T14:03:21Z")

</div>

Hi hotNipi,

this is fabulous. Thank you. While you might be right with saying that the CSS approach is more reasonable, it is less intuitive for most of us (I think). Me personally, I can read and understand a bit of HTML. Nothing complicated but at least for some ICON coloring it is sufficient. Of course it would be great using the CSS 'backdoor'; but this this train has left the station for me. You, on the other hand are the train driver (or locomotive engineer... ;-))

---

<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 14:12 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/15 "2025-02-18T14:12:04Z")

</div>

> [@ceysa75](#):
>
> You, on the other hand are the train driver

Oh no, I can be found eating lunch in the restaurant car.

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [18 February 2025 14:52 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/16 "2025-02-18T14:52:51Z")

</div>

> [@hotNipi](#):
>
> I can be found eating lunch in the restaurant car.

Estonian trains must be nicer than British ones!

---

<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 15:09 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/17 "2025-02-18T15:09:05Z")

</div>

There was a time....

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [4 March 2025 15:09 UTC](https://discourse.nodered.org/t/button-group-nodes-no-change-of-states/95333/18 "2025-03-04T15:09:14Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.