# Simply change button color

**URL:** <https://discourse.nodered.org/t/simply-change-button-color/96192>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [23 March 2025 15:00 UTC](https://discourse.nodered.org/t/simply-change-button-color/96192 "2025-03-23T15:00:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ruk-shan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ruk-shan/32/46377_2.png) [@ruk-shan](https://discourse.nodered.org/u/ruk-shan)\
**Post date:** [23 March 2025 15:00 UTC](https://discourse.nodered.org/t/simply-change-button-color/96192/1 "2025-03-23T15:00:38Z")

</div>

I am trying to change color of a button. I'm injecting msg.ui\_update.buttonColor = 'red';.  
But it seems to be not working. What am I doing wrong here ?

```auto
[
    {
        "id": "1df2f5078ba20e02",
        "type": "tab",
        "label": "Flow 4",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "e0e370a0492f92f2",
        "type": "ui-button",
        "z": "1df2f5078ba20e02",
        "group": "93f9aaa4d3dd3be5",
        "name": "",
        "label": "xxxxx",
        "order": 2,
        "width": "3",
        "height": "2",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "mdi-robot-confused",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 590,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "5dc0e9d6bd22abf5",
        "type": "function",
        "z": "1df2f5078ba20e02",
        "name": "function 3",
        "func": "msg.ui_update.buttonColor = 'red';\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 420,
        "y": 60,
        "wires": [
            [
                "e0e370a0492f92f2",
                "39a013bc46edca06"
            ]
        ]
    },
    {
        "id": "8ea249744859fe3a",
        "type": "inject",
        "z": "1df2f5078ba20e02",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 220,
        "y": 60,
        "wires": [
            [
                "5dc0e9d6bd22abf5"
            ]
        ]
    },
    {
        "id": "39a013bc46edca06",
        "type": "debug",
        "z": "1df2f5078ba20e02",
        "name": "debug 3",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 560,
        "y": 120,
        "wires": []
    },
    {
        "id": "93f9aaa4d3dd3be5",
        "type": "ui-group",
        "name": "Group 1",
        "page": "94179d55f06e9dc9",
        "width": "10",
        "height": "6",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "94179d55f06e9dc9",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "aa4a481102980b53",
        "path": "/page1",
        "icon": "home",
        "layout": "flex",
        "theme": "e553d4d8b2fc2ad7",
        "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": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "aa4a481102980b53",
        "type": "ui-base",
        "name": "My Dashboard",
        "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": "e553d4d8b2fc2ad7",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 March 2025 16:10 UTC](https://discourse.nodered.org/t/simply-change-button-color/96192/2 "2025-03-23T16:10:58Z")

</div>

initialize the object first

```auto
msg.ui_update = {}
msg.ui_update.buttonColor = 'red'

```

Or better still, use a change node.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 March 2025 16:11 UTC](https://discourse.nodered.org/t/simply-change-button-color/96192/3 "2025-03-23T16:11:55Z")

</div>

Ps, your flow cannot be imported.

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````)

````auto
``` 
   code goes here 
```

````

You can edit and correct your post by clicking the pencil ✏ icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![ruk-shan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ruk-shan/32/46377_2.png) [@ruk-shan](https://discourse.nodered.org/u/ruk-shan)\
**Post date:** [24 March 2025 05:10 UTC](https://discourse.nodered.org/t/simply-change-button-color/96192/4 "2025-03-24T05:10:12Z")

</div>

got it. Thank you so much.

---

<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:** [23 April 2025 05:10 UTC](https://discourse.nodered.org/t/simply-change-button-color/96192/5 "2025-04-23T05:10:37Z")

</div>

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