Button to show additional info

Configuration
1

image

I am using this button to both monitor and control a bathroom fan for when the humidity rises. I am wondering if there is a way to include the humidity percentage along with the ON/OFF text or in the top left or right corner? The humidity comes from another sensor. I have seen other topics and links to custom buttons but I really don’t like the look plus they are older posts. So wondering if this natively possible in lovelace UI and I’m just overlooking and if not, is there an easy way to copy and create a new button to be able to do this? (I’m very new to HA).

2

This card is pretty flexible and you can do just about anything with it.

3

Depends what card that is.

4

hey, thanks for the tip on this custom card. I originally looked at it and couldn’t make it work. Seems it has no visual designer. Here is the code I attempted with it. (again, newbie to HA and this scripting language)

type: custom:button-card
color_type: icon
icon: mdi:fan
entity: switch.girls_shower_fan
label: >
  [[[
    var h = states['sensor.th_girls_bath_humidity'];
    return 'Humidity: ' + (h ? h : '0') + '%';
  ]]]
  show_label: true   
  size: 15%   
  styles:
    card:
      - height: 200px

and here is what I see. Button on left is HA original and button on the right is the custom button.

image

How do I correct the title to read “Girls Bath Fan” and what am I doing wrong in getting the percent humidity showing?

I believe my sensor is correct, here is screen shot from Dev tools:

image
image1061×469 27.1 KB

5

I think the showlabel tag is indented too far.

6

The whole block must be outdented.

7

Thank you, that made a difference. Can now get label on the button but something is still not right with the humidity value showing up.

Here is what I see now:
image

and here is the updated code

type: custom:button-card
color_type: icon
icon: mdi:fan
entity: switch.girls_shower_fan
name: Girls Bath Fan
show_state: true
show_label: true
label: |
  [[[
    var h = state['sensor.th_girls_bath_humidity'];
    return 'Humidity: ' + (h ? h : '0') + '%';
  ]]]  size: 10%
styles:
  card:
    - height: 100px

thank you for the feedback & help!!

8

replying with update that is working now… Here is the code for anyone who stumbles across this having similar, new user, troubles…

type: custom:button-card
color_type: icon
icon: mdi:fan
entity: switch.girls_shower_fan
name: Girls Bath Fan
label: |
  [[[ 
    return states['sensor.th_girls_bath_humidity'].state;
  ]]]
show_state: true
show_label: true
styles:
  label:
    - color: gray
    - font-size: 14px
    - justify-self: start
  name:
    - font-size: 18px
  state:
    - color: gray
    - font-size: 18px

What remains is positioning the humidity. I would like it at the top left or right…

Here is what it’s looking like now:
image