Button with a lower part that have info

Dashboard
1

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
image154×100 1.05 KB

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

2

The closest in-built feature here is a Button Group: Button ui-button-group | Node-RED Dashboard 2.0

3

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?

4

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

5

@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

code

[{"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"}}]
6

More of an oversight than a bug, but worthy of an issue if you wouldn't mind please?

7

I will do