# Ui-button dynamic properties

**URL:** <https://discourse.nodered.org/t/ui-button-dynamic-properties/96290>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [27 March 2025 10:09 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290 "2025-03-27T10:09:31Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [27 March 2025 10:09 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/1 "2025-03-27T10:09:31Z")

</div>

Hi everyone,  
I'm trying to transform one of my dashboard v1 in v2 and this is the result ...

 ![alarm](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/ae0b191b281dafbfe96335165874da9599d0baa6.png)

BUTTON:  
to modify label size I used the code for v1

```auto
<font size=8>1</font>

```

but is correct? is there a better way? (same problem with label switch)  
For a button (orange color) I would like to modify dynamically font size but ui-button don't have `msg.ui_update.fontSize` so how can I do it?

Always for that button I would like to set one icon in center position like this ...

 ![buttontv](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/3/43c3b248d6f5ceeda6521ee23c02795ae377c210.png)

In v1 version with one text node and this code ...

```auto
<font color={{msg.color}}><i class="fa fa-circle"></i></font>

```

I had a simple led that I used in many dashboard ..

![led](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a03c9d8dc7579cc851deaf067ac94fc73fbf1065.png)

Ui-led (v2) don't have the center posizion ...  
I would like to have a led like the v1 version ....

For now this are my problems, can you help me?

---

<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:** [27 March 2025 11:34 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/2 "2025-03-27T11:34:10Z")

</div>

Use CSS override.

```auto
[{"id":"f707b6a97548951b","type":"ui-button","z":"9ab81d258b54a577","group":"1c29530020f6b63c","name":"","label":"2","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"alarm-button-with-text","icon":"","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":1230,"y":600,"wires":[[]]},{"id":"feff08b17bbf079a","type":"ui-button","z":"9ab81d258b54a577","group":"1c29530020f6b63c","name":"btn + icon","label":"","order":2,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"alarm-button-with-icon","icon":"monitor","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"orange","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":1240,"y":640,"wires":[[]]},{"id":"4ec0f151f4f494f6","type":"ui-template","z":"9ab81d258b54a577","group":"","page":"","ui":"cf21e7dda9e29be4","name":"CSS","order":0,"width":0,"height":0,"head":"","format":".alarm-button-with-text .v-btn__content{\n font-size: 2rem;\n}\n.alarm-button-with-icon .nrdb-ui-button--icon .v-icon {\n --v-icon-size-multiplier: 1.5;\n color:white;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":1230,"y":540,"wires":[[]]},{"id":"1c29530020f6b63c","type":"ui-group","name":"Schedule","page":"a3c04197f8e84242","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":"a3c04197f8e84242","type":"ui-page","name":"Main","ui":"cf21e7dda9e29be4","path":"/main","icon":"home","layout":"grid","theme":"1b65e7d639a485c8","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":7,"className":"","visible":"true","disabled":"false"},{"id":"1b65e7d639a485c8","type":"ui-theme","name":"Nipi","colors":{"surface":"#3d3d3d","primary":"#0094ce","bgPage":"#292929","groupBg":"#1f1f1f","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [27 March 2025 11:56 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/3 "2025-03-27T11:56:50Z")

</div>

Works fine! Thank you ....

---

<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:** [27 March 2025 12:00 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/4 "2025-03-27T12:00:14Z")

</div>

For the led, I don't use it but made my own.  
Much better cos you can use them where ever you want not just inside the group.  
Here for example they are placed to the group header

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/640d5f9a47f92bedb2cc4f2055b005f90e4b03ac.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:** [27 March 2025 15:48 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/5 "2025-03-27T15:48:50Z")

</div>

Looks decent and harmonic... Which chart node have you used (is it the native one ?).  
Regards

---

<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:** [27 March 2025 15:55 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/6 "2025-03-27T15:55:00Z")

</div>

It is chartjs but with ui-template.  
I added some controls to inform backend about the range of data needed. Controls are hidden by default but toggled on click on chart area. And some other chart options in use to get it look as I want it to be.

---

<div class="post-metadata">

**Author:** ![Mrb32](https://avatars.discourse-cdn.com/v4/letter/m/cdc98d/32.png) [@Mrb32](https://discourse.nodered.org/u/Mrb32)\
**Post date:** [27 March 2025 22:24 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/7 "2025-03-27T22:24:35Z")

</div>

Center the led in ui-led should really be a standard option and not require setting a CSS override manually imho. After all, the formatting option is offered for other elements in the same node. This makes the behaviour inconsistent, which will confuse people.

I had the same issue a few days ago, and I am sure this little thing will be the source of many future queries... Might be worth changing the node to avoid this.

Just my 2 pennies...

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [28 March 2025 07:50 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/8 "2025-03-28T07:50:23Z")

</div>

Hi,  
I would like to change the ui-switch too ...  
With your code ..

```auto
.switch-icon-size .v-btn__content{
    font-size: 1.2rem;
}

```

I change the size of icons ...

 ![switch](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/9111e9717eccbc825a249ee93cfdd7e1ac9ba56f.png)

but not size of the label, is possible to have both?

The label shouldn't be white for default? is possible to have this option too?

---

<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:** [28 March 2025 08:06 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/9 "2025-03-28T08:06:03Z")

</div>

You shod give a class name for the widget  
`switch-with-custom-icon`

And the CSS

```auto
.switch-with-custom-icon .v-btn--icon .v-icon {
    --v-icon-size-multiplier: 1.2;
}

.switch-with-custom-icon .v-label{
    color:white;
    font-size: 1.2rem;
}

```

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [28 March 2025 08:26 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/10 "2025-03-28T08:26:12Z")

</div>

Ok, but I don't understand why I can set the label color red, green, etc, but not white ....  
white is always grey not white ....

---

<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:** [28 March 2025 08:58 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/11 "2025-03-28T08:58:28Z")

</div>

It is very complicated set of CSS rules which do define the color of the switch label. Takes too much time to explain in detail. I don't have that much of free time.  
I do remember that I have read an issue about the color of labels for widgets is not consistent. This is probably one of those examples.

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [28 March 2025 09:06 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/12 "2025-03-28T09:06:23Z")

</div>

Ok, no problem, I will use another color.  
Thank you very much for the previous CSS.

---

<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:** [28 March 2025 09:18 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/13 "2025-03-28T09:18:49Z")

</div>

> [@Giamma](#):
>
> white is always grey not white

For some reason the label text is partially transparent.  
Try

```auto
.switch-with-custom-icon .v-btn--icon .v-icon {
    --v-icon-size-multiplier: 1.2;
}

.switch-with-custom-icon .v-label{
    color:white;
    font-size: 1.2rem;
   opacity: 1;
}

```

---

<div class="post-metadata">

**Author:** ![Giamma](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@Giamma](https://discourse.nodered.org/u/Giamma)\
**Post date:** [28 March 2025 09:25 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/14 "2025-03-28T09:25:12Z")

</div>

Works fine! Thank you ....

---

<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:** [11 April 2025 09:25 UTC](https://discourse.nodered.org/t/ui-button-dynamic-properties/96290/15 "2025-04-11T09:25:29Z")

</div>

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