# How to change Clicked\_Button appearance

**URL:** <https://discourse.nodered.org/t/how-to-change-clicked-button-appearance/98654>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-template, css\
**Created:** [14 August 2025 08:36 UTC](https://discourse.nodered.org/t/how-to-change-clicked-button-appearance/98654 "2025-08-14T08:36:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [14 August 2025 08:36 UTC](https://discourse.nodered.org/t/how-to-change-clicked-button-appearance/98654/1 "2025-08-14T08:36:26Z")

</div>

```flows
[{"id":"f4072154f91a999d","type":"inject","z":"0717a61e1ce5f6fe","name":"","props":[{"p":"payload"},{"p":"mc","v":"[\"m%\",\"m00\",\"m01\",\"m02\",\"m03\",\"m04\"]","vt":"json"},{"p":"nick","v":"[\"All\",\"Machine-00\",\"Machine-01\",\"Machine-02\",\"Machine-03\",\"Machine-04\"]","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":2450,"y":1340,"wires":[["07d40ad4ca6058ec"]]},{"id":"07d40ad4ca6058ec","type":"ui-template","z":"0717a61e1ce5f6fe","group":"42242bd3b1fe7e25","name":"M/C Buttons","order":1,"width":0,"height":0,"head":"","format":"<style>\n .grid-container { display: flex; gap: 2px; }\n .grid-button { flex-grow: 1; padding: 4px; \n text-align: center; font-size: 12px; font-weight: bold; \n color: #4b3d2b; border: 1px solid #c9b49b; border-radius: 4px; \n cursor: pointer; background-image: linear-gradient(to bottom, silver, grey);\n box-shadow: 0 2px 0 0 #d3bca3, 0 3px 0 0 #b39b85, 0 4px 0 0 #947e6a; \n transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; }\n .grid-button:hover { background-image: linear-gradient(to bottom, #d8c7b4, #c9b49b); }\n .grid-button:active { transform: translateY(2px); box-shadow: 0 0 0 0 #d3bca3, 0 0 0 0 #b39b85, 0 2px 0 0 #947e6a; }\n .grid-button.active { color: #fff; background-color: #6a9557; background-image: linear-gradient(to bottom, #82b270, #4d7a3d); box-shadow: 0 2px 0 0 #4d7a3d, 0 3px 0 0 #3a602c, 0 4px 0 0 #2b451f; }\n\n</style>\n\n<div class=\"grid-container\">\n <button \n v-for=\"(nick, index) in msg.nick\" \n :key=\"index\"\n class=\"grid-button\"\n :class=\"{ active: nick === active_nick }\"\n @click=\"send({payload: msg.mc[index]})\">\n {{ nick }}\n </button>\n</div>\n\n<script>\n // This is the standard way to handle data and events in a Node-RED ui-template\n // It's much simpler than a full Vue component setup\n // The `msg` object is automatically available in the template's scope\n \n // We can use a property to track the active button\n // This variable will be part of the `scope` object\n var active_nick = null;\n\n // This function will be called on button click\n function sendPayload(payload) {\n // Update the active button state\n active_nick = payload;\n // Send the payload out of the node\n this.send({ payload: payload });\n }\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":2610,"y":1340,"wires":[["2acb23b1618f265b","43a34650e6f12aaf"]]},{"id":"43a34650e6f12aaf","type":"debug","z":"0717a61e1ce5f6fe","name":"Debug-1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":2770,"y":1340,"wires":[]},{"id":"42242bd3b1fe7e25","type":"ui-group","name":"DT","page":"42b40ffce547bedc","width":"15","height":"1","order":3,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"42b40ffce547bedc","type":"ui-page","name":"ODT","ui":"0aa5ac292a3ec726","path":"/odt","icon":"home","layout":"grid","theme":"71df790af7efd885","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":"14"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"DEL MONTE HOSUR","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-form","ui-text-input","ui-number-input","ui-file-input","ui-button","ui-button-group","ui-radio-group","ui-slider","ui-switch","ui-text","ui-table","ui-chart","ui-gauge","ui-markdown","ui-template","ui-tabulator"],"showPathInSidebar":true,"navigationStyle":"temporary","titleBarStyle":"default"},{"id":"71df790af7efd885","type":"ui-theme","name":"BT Dark blue","colors":{"surface":"#004b96","primary":"#c8c8c8","bgPage":"#19232d","groupBg":"#000000","groupOutline":"#00e119"},"sizes":{"density":"compact","pagePadding":"1px","groupGap":"1px","groupBorderRadius":"1px","widgetGap":"1px"}}]

```

I was able to get few buttons on the dashboard-2, the click function works as well thanks to Google Gemini.  
I asked it to modify the code so that the last clicked button appears differently, may be like inverse, so that i know what was the last pressed button, it is giving changes in code, but when i deploy the change, either nothing happens when i click (no output in debug node) or the buttons disappear altogether, we have been going around in these circles for nearly 2 hours, no breakthrough, the attached code works perfectly except that the last pressed button is difficult to identify.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [14 August 2025 09:09 UTC](https://discourse.nodered.org/t/how-to-change-clicked-button-appearance/98654/2 "2025-08-14T09:09:07Z")

</div>

In a more vue template style:

```html
<template>
  <div class="grid-container">
    <button
      v-for="(nick, index) in msg.nick"
      :key="index"
      class="grid-button"
      :class="{ active: nick === active_nick }"
      @click="selectTab(nick, msg.mc[index])">
      {{ nick }}
    </button>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      active_nick: null
    };
  },
  methods: { 
    selectTab(nick, payload) {
      this.active_nick = nick;
      this.send({ payload });
    }
  }
}
</script>

<style>
  /* Layout container */
  .grid-container {
    display: flex;
    gap: 4px;
    padding: 6px;
    background-color: #f4f4f4;
    border-radius: 6px;
  }

  /* Inactive (flat gray) */
  .grid-button {
    flex-grow: 1;
    padding: 8px 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background-color: #e0e0e0;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  }

  /* Hover for inactive */
  .grid-button:hover {
    background-color: #d5d5d5;
  }

  /* Active (flat blue) */
  .grid-button.active {
    color: #fff;
    background-color: #1d6fc1;
  }

  /* Hover for active */
  .grid-button.active:hover {
    background-color: #1660aa;
  }
</style>

```

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [14 August 2025 09:23 UTC](https://discourse.nodered.org/t/how-to-change-clicked-button-appearance/98654/3 "2025-08-14T09:23:15Z")

</div>

Bind the button color to a variable in your data. For example:

```auto
<template>
    <div>
        <v-btn :color="btnColors[0]" @click="onClick(1)">Button 1</v-btn>&nbsp
        <v-btn :color="btnColors[1]" @click="onClick(2)">Button 2</v-btn>&nbsp
        <v-btn :color="btnColors[2]" @click="onClick(3)">Button 3</v-btn>
    </div>
</template>
<script type="text/javascript">
export default {
data () {
    return {
      btnColors:["blue","blue","blue"]
    }
},
methods: {
    onClick: function(index) {
        for (let i = 0 ; i < this.btnColors.length ; i++)
          this.btnColors[i] = "blue";
        this.btnColors[index-1] = "red";

        const msg = {payload:"Button "+index+" clicked"};
        this.send(msg);
    }
} 
} 
</script>

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [14 August 2025 09:31 UTC](https://discourse.nodered.org/t/how-to-change-clicked-button-appearance/98654/4 "2025-08-14T09:31:04Z")

</div>

Nice...it works.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [14 August 2025 09:32 UTC](https://discourse.nodered.org/t/how-to-change-clicked-button-appearance/98654/5 "2025-08-14T09:32:40Z")

</div>

for fixed buttons (hard coded in template) i do have some similar working. but my button labels and output from those clicks are coming from an array, not sure how to adapt this.  
@bakman2 solution fits in my existing template.

---

<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:** [28 August 2025 09:32 UTC](https://discourse.nodered.org/t/how-to-change-clicked-button-appearance/98654/6 "2025-08-28T09:32:46Z")

</div>

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