Because you are comparing a number with a string. What you are doing is 4 >= "7" which is probably true from a javascript perspective. What you want is 4 >= 7. This comment valid is for all your tests in your code.
Also it’s not => but >=
Bugger this was the culprit. Thank you. Not sure how that changed, I must have been fiddling and broke it.
Thanks. I copied the code out of post #1 and changed it to match my device and function (play vs volume up). I guess I should have realized since the OP isn’t maintaining the card that the original post isn’t updated as HA changes over the years.
EDIT: to be specific, this is the card I was copying and modifying, which again is apparently out of date syntax:
Sorry that I got lazy and didn’t look thru all 5000 posts 
…
Can anyone tell me how to get the label to wrap onto two lines if it’s too long?
this is the code for the card:
- type: 'custom:button-card'
label: "Reload Templates"
entity_picture: /local/icons/icons8/icons8-load-resume-template-80.png
show_entity_picture: true
show_label: true
tap_action:
action: call-service
service: template.reload
styles:
label:
- font-size: 10px
- align-self: middle
- padding-top: 4px
- padding-bottom: 4px
- type: 'custom:button-card'
label: "Reload Automations"
entity_picture: /local/icons/icons8/icons8-automation-80.png
show_entity_picture: true
show_label: true
tap_action:
action: call-service
service: automation.reload
styles:
label:
- font-size: 10px
- align-self: middle
- padding-top: 4px
- padding-bottom: 4px
and this is how it looks:
I’d like to wrap the label lines onto two lines if possible.
Right, that is very outdated indeed 
Always check the documentation on github, it is where it is the most up to date.
You can have a look here
1 Like
Sweet! thanks!
That worked for the automation button but the template button still doesn’t wrap because it’s not technically outside the limits.
Can I force that one to wrap somehow as well?
I tried a newline in the label but it just ignored it.
You can do it this way to force it:
label: "Reload<br/>Templates"
1 Like
Awesome!
Thanks again.
Any help will be appreciated. I’m trying to have the card icon change color based on an attribute of the entity. I have tried various syntax, but cant seem to make it work. This is what I currently have:
state:
- operator: template
value: >
return states['binary_sensor.binnehof'].attributes.bypassed === true #Tried this syntax
styles:
icon:
- color: 'grey'
- operator: template
value: >
var bypassstate = binary_sensor.binnehof.attributes.bypassed;
return bypassstate === false
styles:
icon:
- color: 'black'Hi all
I have the following button that it is working ok
color: 'rgb(65, 95, 100)'
color_type: card
icon: 'mdi:air-humidifier'
name: 'On'
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.jc8hcukcfw6xiia5
styles:
card:
- background-color: |
[[[
if (states['sensor.power_25'].state >= 50)
return "green";
return "grey";
]]]
type: 'custom:button-card'
I need to create one more button where if the sensor.power.25 is >0 and < 10 to (ideally blink) or to change its color to red for example.
Can someone help, because I can not manage to get it right.
Thanks
I’m really happy with custom button card, use it a lot! I’ve made a button to control my bathroom fan, with the value of a humidity sensor in the corner. I would like the percentage to be rounded to a whole value, so without the decimals. Is it possible to do this within the button? For example by templating the custom fields?
I know how to template a new sensor with rounded value, but would be nice if it could be done in lovelace?
button code:
type: 'custom:button-card'
entity: switch.mechanische_ventilatie_aangezet
icon: 'mdi:fan'
color_type: icon
show_name: false
aspect_ratio: 1/1
state:
- value: 'on'
spin: true
styles:
grid:
- position: relative
custom_fields:
luchtvochtigheid:
- border-radius: 5%
- position: absolute
- left: 60%
- top: 10%
- height: 50px
- width: 50px
- font-size: 16px
- line-height: 20px
custom_fields:
luchtvochtigheid: |
[[[
return `<span>${states['sensor.badkamer_luchtvochtigheid_luchtvochtigheid'].state} %</span>`
]]]
What part do you want to have blinking? The whole button or maybe just the icon?
Yes, it can be done:
custom_fields:
luchtvochtigheid: |
[[[
return `<span>${Math.round(states['sensor.badkamer_luchtvochtigheid_luchtvochtigheid'].state)} %</span>`
]]]
Tnx for the fast response, works like a charm!
I would prefer the icon
not entirely sure where to post this, but since it concerns concatenating button-card configs, please allow me this:
for a dynamically created horizontal-stack (with button-cards) I use this as main config:
type: conditional
conditions:
- entity: sensor.count_alerts_notifying
state_not: '0'
card:
type: custom:state-switch
entity: sensor.count_alerts_notifying
states:
1:
!include /config/lovelace/buttons/buttons_alerts_1.yaml
2:
!include /config/lovelace/buttons/buttons_alerts_2.yaml
3:
!include /config/lovelace/buttons/buttons_alerts_3.yaml
4:
!include /config/lovelace/buttons/buttons_alerts_4.yaml
works fine, and since I never see more than 4 alerts happening together this needs to cater for a horizontal stack of max 4 button-cards.
the includes have 3 to 1 blank buttons, to always create button cards with the same size in the horizontal stack.
this is a section of the button_alerts_1.yaml to give you an idea:
type: vertical-stack
cards:
- !include /config/lovelace/includes/include_button_marquee_alerts.yaml
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.github_repo_update
state: 'on'
card: !include /config/lovelace/includes/include_button_github_repo_alert.yaml
- type: conditional
conditions:
- entity: binary_sensor.earthquakes_near_active
state: 'on'
card: !include /config/lovelace/includes/include_button_quake_alert.yaml
- type: conditional
conditions:
- entity: binary_sensor.trash_notification
state: 'on'
card: !include /config/lovelace/includes/include_button_trash_alert.yaml
- type: conditional
conditions:
- entity: binary_sensor.schimmel_alert
state: 'on'
card: !include /config/lovelace/includes/include_button_ventilate.yaml
- type: conditional
conditions:
- entity: binary_sensor.updater_notification
state: 'on'
card: !include /config/lovelace/includes/include_button_updater.yaml
# etc etc etc and now follows the section for 3 blanks, which in the others use 2 or 1 blanks
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: vertical-filler
Thing is, the current button_alerts_1.yaml, button_alerts_2.yaml, button_alerts_3.yaml and button_alerts_4.yaml are almost identical (and they hold many more conditional cards than shown above), with the exception of the number of blank cards.
To drastically cut down on duplicate code (all the conditional cards) I’ve been trying to create a alerts_core.yaml and include 3, 2, and 1 blank somehow, but I can’t find a way to do that.
Please have a look how this could be done?
To give you an idea for the button_alerts_1.yaml:
type: vertical-stack
cards:
- !include /config/lovelace/includes/include_button_marquee_alerts.yaml
- type: horizontal-stack
cards:
!include /config/lovelace/buttons/buttons_alerts_core.yaml ##<---- how to stack this with the following blank cards ??
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: vertical-filler
core issue: the horizontal stack wont stack/concatenate another horizontal stack…
hope this is clear, please have a look?
thanks!
hi all
how can I write the following?
I need the power state to be >0 and <10…
styles:
card:
- background-color: |
[[[
if (states['sensor.power_25'].state > 0 <10)
return "green";
return "grey";
]]]
if ((states['sensor.power_25'].state > 0 ) and (states['sensor.power_25'].state <10))That was fast! but it is not working. When I added the formula the button disappeared.
Like that:
if (states['sensor.power_25'].state > 0 && states['sensor.power_25'].state < 10)
1 Like
Doh! of course…