# Help with \`button\` node, \`text\` node and formatting text in them

**URL:** <https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657>\
**Category:** Dashboard\
**Created:** [18 September 2019 11:52 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657 "2019-09-18T11:52:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [18 September 2019 11:52 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/1 "2019-09-18T11:52:08Z")

</div>

On my dashboard _now_ has a `text` node which shows this:

![Screenshot%20from%202019-09-18%2021-37-19](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7370ed1fc3eee37b3ea98b07d37d5d32276fdd04.png)

The 99 is the name of the node and the graphic is sent in the message.  
It is a `text` node.

With my recent messing around, I have become adventurous with the dashboard.  
I am wanting to add a `button` node in the equation.

I know this is not the best example, because in the `text` node, I can make it more like this:  
(repost of image)

![Screenshot%20from%202019-09-18%2021-46-03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d0773179c462737ec9e1da27025af080ab986528.png)

Note now it is spaced differently.

That is kind of better.

So I replace the `text` node with a `button` node.

This is what I get:

![Screenshot%20from%202019-09-18%2021-37-25](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/bbdf0ecdd94b6c5d2e3e53afd18428f4c409f359.png)

Alas the _name_ and the _icon_ are now adjacent. (Not wanted)

And I think it is a different size also/anyway. (am I seeing things?)

This is the `button` node code:

```auto
[{"id":"6a470aeb.6cca7c","type":"ui_button","z":"c191bc17.3b5c5","name":"","group":"40967838.08e488","order":0,"width":"2","height":"1","passthru":false,"label":"99 {{msg.payload}}","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":650,"y":190,"wires":[[]]},{"id":"40967838.08e488","type":"ui_group","z":"","name":"Health alarm","tab":"ce4bcacd.5cc46","order":9,"disp":true,"width":"6","collapse":false},{"id":"ce4bcacd.5cc46","type":"ui_tab","z":"","name":"VTEMP","icon":"dashboard","order":21,"disabled":false,"hidden":false}]

```

This is the `text` node code:

```auto
[{"id":"e21636d1.2ff9b8","type":"ui_text","z":"c636aa5a.cc34","group":"1f5fe937.c354c7","order":9,"width":"2","height":"1","name":"99","label":"99","format":"{{msg.payload}}","layout":"row-spread","x":1540,"y":3327,"wires":[]},{"id":"1f5fe937.c354c7","type":"ui_group","z":"","name":"Cat-5","tab":"1c792414.600e94","order":3,"disp":true,"width":"10","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"track_changes","order":2,"disabled":false,"hidden":false}]

```

I know I should know what I am wanting, but I am stuck what can be done.

I'm looking for anything I can do to get the same _output_ on the `button` node as I get with the `text` node.

Ok, yes the two examples are from different machines.  
The working two (the first two) are on one machine. The example one (the `button` one) is on another.

That is because deploys take a long time to do and it is my main machine.  
The _other_ one - with the `button` is my test machine.  
(NUC)

---

<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:** [18 September 2019 13:00 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/2 "2019-09-18T13:00:04Z")

</div>

> [@Trying\_to\_learn](#):
>
> That is because deploys take a long time to do

A deploy should not take a long time, particularly if you deploy only modified nodes.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [18 September 2019 13:04 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/3 "2019-09-18T13:04:44Z")

</div>

Well, say 40 second compared to 2.

You tell me.

That is nominal.

Hang on about to re-deploy it only by moving the position of a couple of tabs.

Ok. 49 seconds only because I re-ordered the tabs. (Measured on stop watch from deploy button being pressed to the flow becoming once again usable.)

Compared to less than 10 on the NUC.

---

<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:** [18 September 2019 13:15 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/4 "2019-09-18T13:15:05Z")

</div>

You weren't talking about moving tabs (which affects many nodes) but adding a button node and removing a text node.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [18 September 2019 20:59 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/5 "2019-09-18T20:59:46Z")

</div>

Adding **ONE** `inject` tab on the flow which is seen when I open the browser:

56 seconds.

(Why aren't you answering the QUESTION rather getting me to waste time deploying for no good reason?)

---

<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:** [18 September 2019 21:17 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/6 "2019-09-18T21:17:05Z")

</div>

> [@Trying\_to\_learn](#):
>
> Why aren't you answering the QUESTION rather getting me to waste time deploying for no good reason

For the best reason, because I have absolutely no idea what the answer is.  
Given that, I was trying to help in determining why it takes so long to deploy. You say you have added a single inject tab, do you mean you have added a single inject _node_? It seems very odd that should take 56 seconds to deploy. Whether you want to investigate why I leave entirely up to you.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [18 September 2019 22:03 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/7 "2019-09-18T22:03:30Z")

</div>

> [@Colin](#):
>
> For the best reason, because I have absolutely no idea what the answer is.

So on that statement, all the things I don't know anything about: I should reply to people's questions and ask them questions about things which are only slightly related to their original question.

Maybe it takes 56 seconds to deploy because:  
RasPi model 2B  
(2 USB ports - early version)

This is what is in the node-red directory.  
(Check the sizes)

```auto
pi@TimePi:~/.node-red $ ll
total 1928
drwxr-xr-x 4 pi pi 4096 Nov 11 2018 lib/
drwxr-xr-x 316 pi pi 12288 Aug 22 08:39 node_modules/
drwxr-xr-x 8 pi pi 4096 Jun 27 13:50 public/
-rw-r--r-- 1 pi pi 72 May 18 18:55 flows_TimePi_cred.json
-rw-r--r-- 1 pi pi 1793366 Sep 19 06:57 flows_TimePi.json
-rw-r--r-- 1 pi pi 25196 Feb 2 2019 npm_modules.txt
-rw-r--r-- 1 pi pi 2084 Aug 22 08:40 package.json
-rw-r--r-- 1 pi pi 108690 Aug 22 08:40 package-lock.json
-rw-r--r-- 1 pi pi 9196 May 18 18:55 settings.js
pi@TimePi:~/.node-red $ 

```

I don't know what the "normal" size of a flow is.  
But 1793366 seems a bit large.  
There are 25 tabs.

Maybe that has something to do with it.

But that isn't my question:

I am wanting help with how to format text in a `button` node to get it like the `text` node.

I am unable to see the connection between that and your suggestions.  
And believe me I know a lot about abstract thinking. I have a lot of fun thinking outside the box.

---

<div class="post-metadata">

**Author:** ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)\
**Post date:** [18 September 2019 22:25 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/8 "2019-09-18T22:25:48Z")

</div>

I believe Colin was trying to HELP with the issue on long deployment times - if you are only deploying changes rather than the whole flow each time then it does seem excessive - however based on some of the "intricate" flows you have posted recently then it is maybe not out of the realm of possibility. If it is taking that amount of time to deploy i would suggest that you are not using the right platform for the application.

Having said that i have nothing to add to the Node formatting and will leave it to someone with more UI skills than you or I to answer.

Craig

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 September 2019 22:32 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/9 "2019-09-18T22:32:22Z")

</div>

What happens if you set the icon of the button using the icon field rather that the text field ?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [19 September 2019 03:23 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/10 "2019-09-19T03:23:07Z")

</div>

Thanks.

But indulge me my stupid question for today:

This is what a `text` node looks like when I open it to edit it:

 ![Screenshot%20from%202019-09-19%2013-18-32](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b304863f683c81ed0c05d627c9daa3458d9ee09b.png)

This is what a `button` node looks like:

 ![Screenshot%20from%202019-09-19%2013-18-15](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/593ed33c58299f1ff12a8ef2a0a8cbbb285e5acf.png)

 ![Screenshot%20from%202019-09-19%2013-18-18](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2ae9c36c5feb76d98cb1d0b2bde53753cd210c40.png)

Though there is an `icon` field in the first one, that is for text to be entered.  
The icon in the `text` node doesn't have a _name_. It shows the icon.

As there isn't one in the `button` node, how would I get what you suggested done?

After digging a bit, I think I found the `name` for the `text` button icon.  
`ui_text.png`.

Put that in the field. Not good/working.

 ![Screenshot%20from%202019-09-19%2013-57-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6d5ef59a7a5c2af2cf80c99df300562f5b3e2d75.png) ![Screenshot%20from%202019-09-19%2013-57-05](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8b7272342c4c36a96b1233344835ce863854aa7a.png)

---

<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:** [19 September 2019 05:12 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/11 "2019-09-19T05:12:45Z")

</div>

The icon "appears" to come from msg.payload, can you post that part as well ?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [19 September 2019 08:38 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/12 "2019-09-19T08:38:32Z")

</div>

Is/was this what was meant.

![Screenshot%20from%202019-09-19%2018-36-45](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1e3a354c53dd36cdc67a672a085dffcf7ec6cf8e.png)

![Screenshot%20from%202019-09-19%2018-36-49](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f9788683eb7c28ca382fc80aa2133e167de396a2.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 September 2019 08:44 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/13 "2019-09-19T08:44:19Z")

</div>

No... the text in the label and the icon in the icon.  
( and what is the contents of msg.payload ? }

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [19 September 2019 08:44 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/14 "2019-09-19T08:44:45Z")

</div>

Ok, there seems to be some confusion.

I'll explain again the problem:  
If I send my _message_ to a `text` node, it looks like:

(Ok, I deleted the file.)

It was nice.  
I get the IP number to the left of the _node_. The font\_awesome icon to the right.

Because I am trying something, I want to make that node a `button`.

I do that and the _formatting_ is lost.

It was suggested I use the icon . . . . . . Oh. Ooops.

Ok.

Well short answer: It doesn't seem to work. I just posted a reply and I see it has been replied to now so I will stop wasting time and read it.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [19 September 2019 08:46 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/15 "2019-09-19T08:46:41Z")

</div>

Sorry. I misread what you meant.

This is the contents (in this instance)

`payload: '<font color = "lime" i class="fa fa-bullseye fa-2x"></i>'`

But it is a kind of _given_ that as it is the `payload` it is variable.

So it is not always that.

It can change depending on events.

---

<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:** [19 September 2019 08:51 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/16 "2019-09-19T08:51:46Z")

</div>

Look at this code:

`'<font color = "lime" i class="fa fa-bullseye fa-2x"></i>'`

This is incorrect html.

The notation is:  
`<font><i></i></font>`

eg:

`'<font color="lime"><i class="fa fa-bullseye fa-2x"></i></font>'`

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [19 September 2019 08:52 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/17 "2019-09-19T08:52:44Z")

</div>

pretty sure that’s come up before

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [19 September 2019 08:58 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/18 "2019-09-19T08:58:32Z")

</div>

Yeah, ok. I goofed.

I spent a lot of time going over fixing the codes, but what I failed to do what edit any **sub flows**.

Hey, ok. I admit it.

Ok, so code fixed.

Putting it as told (in the `icon` field) I still get a question mark as previously posted.

Moving it to the `label` field: It works in that I see the 99 and the `bullseye` icon.  
Just they are too close together.

---

<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:** [19 September 2019 09:09 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/19 "2019-09-19T09:09:38Z")

</div>

`99 {{msg.payload}}`  
Because there are 3 spaces between the 2 ?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 September 2019 09:11 UTC](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657/20 "2019-09-19T09:11:03Z")

</div>

Ok - so...  
The icon field isn't dynamic - so won't accept {{msg.payload}}.  
So you are doing the right thing sending it in as the label - but the label just thinks it is text so aligns it as if it was just a font on the same line - so the base of the "letters" line up. - If you didn't have the fa-2x then they line up ok - but because you are adding a large"letter" it will stand out on top.

You could add `&nbsp;&nbsp;&nbsp;` to force 3 spaces if you like...

[Next page](https://discourse.nodered.org/t/help-with-button-node-text-node-and-formatting-text-in-them/15657.md?page=2)