# Button with a lower part that have info

**URL:** <https://discourse.nodered.org/t/button-with-a-lower-part-that-have-info/94397>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [6 January 2025 14:14 UTC](https://discourse.nodered.org/t/button-with-a-lower-part-that-have-info/94397 "2025-01-06T14:14:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![grawsom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grawsom/32/53070_2.png) [@grawsom](https://discourse.nodered.org/u/grawsom)\
**Post date:** [6 January 2025 14:14 UTC](https://discourse.nodered.org/t/button-with-a-lower-part-that-have-info/94397/1 "2025-01-06T14:14:55Z")

</div>

Is there a way where a button can have an upper and lower part, so when you press the button the button change color and the text in the lower part changed.  
Either by Dashboard 2.0, html or any other way.

Mockup picture - dashboard 1.0

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

It could be a wish for Dashboard 2.0 "button with status" where lower part could be text, led or any other thing.

---

<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:** [6 January 2025 16:20 UTC](https://discourse.nodered.org/t/button-with-a-lower-part-that-have-info/94397/2 "2025-01-06T16:20:57Z")

</div>

The closest in-built feature here is a Button Group: [Button ui-button-group | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-button-group.html)

---

<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:** [6 January 2025 17:58 UTC](https://discourse.nodered.org/t/button-with-a-lower-part-that-have-info/94397/3 "2025-01-06T17:58:13Z")

</div>

If you pass a long label to a button it will fold onto a second line. By passing appropriate strings you could make the second line change, would that do what you want?

---

<div class="post-metadata">

**Author:** ![grawsom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grawsom/32/53070_2.png) [@grawsom](https://discourse.nodered.org/u/grawsom)\
**Post date:** [6 January 2025 19:41 UTC](https://discourse.nodered.org/t/button-with-a-lower-part-that-have-info/94397/4 "2025-01-06T19:41:27Z")

</div>

@joepavitt and @Colin  
Will have a look at the combination of the two things.

---

<div class="post-metadata">

**Author:** ![grawsom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grawsom/32/53070_2.png) [@grawsom](https://discourse.nodered.org/u/grawsom)\
**Post date:** [7 January 2025 09:16 UTC](https://discourse.nodered.org/t/button-with-a-lower-part-that-have-info/94397/5 "2025-01-07T09:16:51Z")

</div>

@Colin - I can't see it's working with long text, but found some threads where it i mentioned that HTML is allowed, so `<br>` works.

@joepavitt - bug? in 2.0 ui-button-group, the label works, but not the one that you add.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/2/82d071535d952b4dd2969f556660bf09ca1cb7dd.png)

code

```auto
[{"id":"8bb9313677104888","type":"ui-button-group","z":"e58a038315dde4fd","name":"","group":"1579a21dbba7922e","order":1,"width":3,"height":1,"label":"button<br>group","className":"","rounded":false,"useThemeColors":true,"passthru":false,"options":[{"label":"Button 1<br>infoline","icon":"","value":"option_0","valueType":"str","color":"#009933"},{"label":"Button 2<br>infoline","icon":"","value":"option_1","valueType":"str","color":"#999999"}],"topic":"topic","topicType":"msg","x":350,"y":380,"wires":[[]]},{"id":"1579a21dbba7922e","type":"ui-group","name":"Button Test","page":"ab2cbf2599cace69","width":7,"height":"5","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"ab2cbf2599cace69","type":"ui-page","name":"Buttons","ui":"a8dc4de17ff7d144","path":"/buttons","icon":"home","layout":"grid","theme":"970cbcc1aaf503af","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":1,"className":"","visible":"true","disabled":"false"},{"id":"a8dc4de17ff7d144","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"]},{"id":"970cbcc1aaf503af","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

```

---

<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:** [7 January 2025 09:32 UTC](https://discourse.nodered.org/t/button-with-a-lower-part-that-have-info/94397/6 "2025-01-07T09:32:00Z")

</div>

> [@grawsom](#):
>
> bug? in 2.0 ui-button-group, the label works, but not the one that you add.

More of an oversight than a bug, but worthy of an [issue](https://github.com/FlowFuse/node-red-dashboard/issues) if you wouldn't mind please?

---

<div class="post-metadata">

**Author:** ![grawsom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grawsom/32/53070_2.png) [@grawsom](https://discourse.nodered.org/u/grawsom)\
**Post date:** [7 January 2025 10:16 UTC](https://discourse.nodered.org/t/button-with-a-lower-part-that-have-info/94397/7 "2025-01-07T10:16:39Z")

</div>

I will do

---

<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:** [6 February 2025 10:16 UTC](https://discourse.nodered.org/t/button-with-a-lower-part-that-have-info/94397/8 "2025-02-06T10:16:45Z")

</div>

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