# Button name line break

**URL:** <https://discourse.nodered.org/t/button-name-line-break/19619>\
**Category:** Dashboard\
**Created:** [26 December 2019 23:40 UTC](https://discourse.nodered.org/t/button-name-line-break/19619 "2019-12-26T23:40:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [26 December 2019 23:40 UTC](https://discourse.nodered.org/t/button-name-line-break/19619/1 "2019-12-26T23:40:07Z")

</div>

If have a button that's made with the help of a ui\_template in the dashboard.  
That works perfect.

```auto
<md-button class="vibrate filled touched smallfont rounded" style={{msg.payload}} ng-click="send({payload: 'Click'})"> 
 {{msg.buttonname}}
</md-button>

```

If I send a message to the button `msg.buttonname= "Hello world"` , works also perfect.  
But now I want **Hello** and **world** on 2 lines in the button an that is something I can't get working.  
Tried `msg.buttonname= "Hello\nworld"` , `msg.buttonname= "Hello"+<br/>+"world"` and some varieties on this but without luck.  
What I'm doing wrong, how do i get the line break correct in the message?

---

<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:** [27 December 2019 09:32 UTC](https://discourse.nodered.org/t/button-name-line-break/19619/2 "2019-12-27T09:32:47Z")

</div>

Material Design does not allow for multi-line buttons by default..

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [27 December 2019 10:54 UTC](https://discourse.nodered.org/t/button-name-line-break/19619/3 "2019-12-27T10:54:41Z")

</div>

If I do like this in the ui\_template, the text is in 2 lines. This suggest that it's supported, but how to get it in a message?

```auto
<md-button class="vibrate filled touched smallfont rounded" style={{msg.payload}} ng-click="send({payload: 'Click'})"> 
   Hello<br/>world
</md-button>

```

---

<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:** [27 December 2019 11:07 UTC](https://discourse.nodered.org/t/button-name-line-break/19619/4 "2019-12-27T11:07:26Z")

</div>

You need to bind the incoming msg by adding `ng-bind-html="msg.payload"` to your button

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [27 December 2019 13:18 UTC](https://discourse.nodered.org/t/button-name-line-break/19619/5 "2019-12-27T13:18:36Z")

</div>

Cool, that was the trick.  
Thanks

---

<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:** [5 August 2020 06:52 UTC](https://discourse.nodered.org/t/button-name-line-break/19619/6 "2020-08-05T06:52:14Z")

</div>

(Sorry this is an old thread....)

@dceejay

> You need to bind the incoming msg by adding `ng-bind-html="msg.payload"` to your button

I have that problem and can't get what you mean by that.

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [5 August 2020 08:06 UTC](https://discourse.nodered.org/t/button-name-line-break/19619/7 "2020-08-05T08:06:58Z")

</div>

In your button template you have to add `ng-bind-html="msg.payload"`  
In this example below I have used msg.buttonname instead of msg.payload  
Example:

```auto
<md-button class="vibrate filled touched smallfont rounded" style={{msg.backcolor}} ng-bind-html="msg.buttonname" ng-click="send({action: 'Click'})"> 
 {{msg.buttonname}}
 
</md-button> 

```

Now the payload of msg.buttonname can contains html.

```auto
msg.buttonname = "Licht<br/>Badkamer"

```

![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfae08ec813b52142392fbc30bfc8d595e2a4eef.png)

---

<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:** [5 August 2020 08:21 UTC](https://discourse.nodered.org/t/button-name-line-break/19619/8 "2020-08-05T08:21:16Z")

</div>

Oh, so it isn't a `button` node. But the `template` node.

Right!

Silly me!

---

<div class="post-metadata">

**Author:** ![Sergii](https://avatars.discourse-cdn.com/v4/letter/s/ad7895/32.png) [@Sergii](https://discourse.nodered.org/u/Sergii)\
**Post date:** [6 December 2022 17:26 UTC](https://discourse.nodered.org/t/button-name-line-break/19619/9 "2022-12-06T17:26:02Z")

</div>

I did not understand what and where to write. Can you provide an example code?