# Multi line label in Dashboard 2.0 Button?

**URL:** https://discourse.nodered.org/t/multi-line-label-in-dashboard-2-0-button/84882
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [24 January 2024 15:42 UTC](https://discourse.nodered.org/t/multi-line-label-in-dashboard-2-0-button/84882 "2024-01-24T15:42:22Z")
**Posts on this page:** 6
**Page:** 1

<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: [24 January 2024 15:42 UTC](https://discourse.nodered.org/t/multi-line-label-in-dashboard-2-0-button/84882/1 "2024-01-24T15:42:22Z")

</div>

Is it possible to have multi line text in a dashboard 2.0 Button widget? I tried `\n` and `<br/>` but was not surprised when neither did the job.

---

<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: [24 January 2024 20:39 UTC](https://discourse.nodered.org/t/multi-line-label-in-dashboard-2-0-button/84882/2 "2024-01-24T20:39:40Z")

</div>

Good old CSS override.  
For button add class:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3bc8b91b36e6fca16897d2e3365ed6a7fc0c849f.png)

And make an ui\_template for CSS overrides:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/e/7e1e6d7f3a85a0ed97be6fb7618acd9788bd371c.png)

And if you fall into such situations and you don't like it:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/ddbc9336526eced0913606e7fd85c4e98c6c561a.png)

you can add also `text-wrap: pretty;`

So it tries to wrap more natural way.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9f703637d3b86d99e53fa57ea01acc13c1606e7b.png)

---

<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: [24 January 2024 21:01 UTC](https://discourse.nodered.org/t/multi-line-label-in-dashboard-2-0-button/84882/3 "2024-01-24T21:01:16Z")

</div>

Magic (well CSS actually, but near enough).

Thanks.

---

<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: [24 January 2024 21:35 UTC](https://discourse.nodered.org/t/multi-line-label-in-dashboard-2-0-button/84882/4 "2024-01-24T21:35:06Z")

</div>

@joepavitt should this be the default for buttons so that if there is not room on the button for the text then it folds rather than flowing out the ends of the button and even into adjacent widgets.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/6/e6027581d6f8f35cec38e4a0d3f98dc2c8a8c22b.png)

I see that if necessary the button will grow in height if the label name will still not fit in

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/b/db5b026b5049ee57b5b38d2ed040d000552d87f2.png)

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [25 January 2024 09:37 UTC](https://discourse.nodered.org/t/multi-line-label-in-dashboard-2-0-button/84882/5 "2024-01-25T09:37:49Z")

</div>

This styling is (currently) entirely driven by Vuetify, as we're using the Vuetify Button Widget. Happy to look into overrides on the styling though.

Also open to PRs too - happy to go with @hotNipi's styling here as the default.

---

<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: [8 February 2024 09:38 UTC](https://discourse.nodered.org/t/multi-line-label-in-dashboard-2-0-button/84882/6 "2024-02-08T09:38:01Z")

</div>

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