But in this example theres just Card option. Everytime i use - custom_fields: or cards: it fails for me with my code.
Closes i been to get somewere is to have all of the buttons in the card disapear when state is true. But not on individual
Is there a way to show in a button card if there is also an hold_action other than a tap_action?
Looking to start using this great card. Can someone please explain the difference in the Configuration Template system of custom:button-card, versus the decluttering card?
The templates in decluttering-card are just to replace a variable with a value. In button card itâs javascript code
I donât understand the question
I mean if there is some way to show in a button that there is a hold_action inside the config other than a tap_action.
Finaly Got it all working with doing as follow, Thx for suppyling a Example.
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.jimmyberglund
state_not: Borta
card:
type: 'custom:button-card'
template: button
color_type: card
custom_fields:
temp: |
[[[
return `<ha-icon icon='mdi:motion-sensor' style='width: 15px; height: 15px; color: var(--paper-item-icon-active-color);'></ha-icon>
<span>${states['sensor.jimmyberglund'].state}</span>`
]]]
show_entity_picture: 'true'
styles:
card:
- background-image: url("/local/jimmy.jpg")
- background-size: cover
- background-position: 50% 50%
- text-shadow: '1px 1px #000000'
- color: white
- font-size: 14px
- font-weight: bold
grid:
- grid-template-areas: '"icn temp" "n n" "i i"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 70fr 1fr 2fr
- type: conditional
conditions:
- entity: sensor.mariascherp
state_not: Borta
card:
type: 'custom:button-card'
template: button
color_type: card
custom_fields:
temp: |
[[[
return `<ha-icon icon='mdi:motion-sensor' style='width: 15px; height: 15px; color: var(--paper-item-icon-active-color);'></ha-icon>
<span>${states['sensor.mariascherp'].state}</span>`
]]]
show_entity_picture: 'true'
styles:
card:
- background-image: url("/local/maria.jpg")
- background-size: cover
- background-position: 50% 50%
- text-shadow: '1px 1px #000000'
- color: white
- font-size: 14px
- font-weight: bold
grid:
- grid-template-areas: '"icn temp" "n n" "i i"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 70fr 1fr 2fr
- type: conditional
conditions:
- entity: binary_sensor.entredorr
state_not: 'off'
card:
template: button
type: 'custom:decluttering-card'
variables:
- entity: binary_sensor.entredorr
- icon: 'mdi:door-closed'
- name: Entre dörr
- colorstyle: >-
[[[ if (entity.state == 'on') return
'var(--paper-item-icon-active-color)'; else return
'var(--paper-item-icon-color)'; ]]]
- tempfield: ''
- cpufield: >-
[[[ if (entity.state == 'on') return `<ha-icon icon='mdi:door'
style='width: 12px; height: 12px; color: var(--red);'></ha-icon>
<span><span style='color:
var(--text-color-sensor);'>Ăppen</span></span>`; else return
`<ha-icon icon='mdi:door' style='width: 12px; height: 12px; color:
var(--paper-item-icon-active-color);'></ha-icon> <span><span
style='color: var(--text-color-sensor);'>StÀngd</span></span>`; ]]]
- ramfield: ''
- sdfield: ''
- show_last_changed1: show_last_changed
- show_last_changed2: 'true'
- opacity1: opacity
- opacity2: 1
- icon1: icon
- icon2: 'mdi:door-open'
- cpustyle: >-
[[[ if (entity.state == 'on') return
'var(--paper-item-icon-active-color)'; ]]]
- type: 'custom:decluttering-card'
template: button
variables:
- entity: weather.smhi_hemma
- icon: >-
[[[ if (entity.state == 'partlycloudy') return
'mdi:weather-partlycloudy'; if (entity.state == 'clear-night') return
'mdi:weather-night'; if (entity.state == 'cloudy') return
'mdi:weather-cloudy'; if (entity.state == 'overcast') return
'mdi:weather-cloudy-arrow-right'; if (entity.state == 'fog') return
'mdi:weather-fog'; if (entity.state == 'hail') return
'mdi:weather-hail'; if (entity.state == 'lightning') return
'mdi:weather-lightning'; if (entity.state == 'lightning-rainy') return
'mdi:weather-lightning-rainy'; if (entity.state == 'pouring') return
'mdi:weather-pouring'; if (entity.state == 'rainy') return
'mdi:weather-rainy'; if (entity.state == 'snowy') return
'mdi:weather-snowy'; if (entity.state == 'snowy-rainy') return
'mdi:weather-snowy-rainy'; if (entity.state == 'sunny') return
'mdi:weather-sunny'; if (entity.state == 'windy') return
'mdi:weather-windy'; if (entity.state == 'windy-variant') return
'mdi:weather-windy-variant'; ]]]
- name: VĂ€der
- colorstyle: >-
[[[ if (entity.state == 'partlycloudy') return 'orange'; if
(entity.state == 'clear-night') return 'lime'; if (entity.state ==
'cloudy') return 'cyan'; if (entity.state == 'overcast') return
'cyan'; if (entity.state == 'fog') return 'magenta'; if (entity.state
== 'hail') return 'magenta'; if (entity.state == 'lightning') return
'lime'; if (entity.state == 'lightning-rainy') return 'lime'; if
(entity.state == 'pouring') return 'lime'; if (entity.state ==
'rainy') return 'lime'; if (entity.state == 'snowy') return 'lime'; if
(entity.state == 'snowy-rainy') return 'lime'; if (entity.state ==
'sunny') return 'yellow'; if (entity.state == 'windy') return 'cyan';
if (entity.state == 'windy-variant') return 'cyan'; ]]]
- tempfield: >-
[[[ var options = { hour: 'numeric', minute: 'numeric' }; var
sunrise_date = new Date(states['sun.sun'].attributes.next_rising); var
sunrise_time = sunrise_date.toLocaleDateString('en-GB',
options).split(',')[1]; var sunset_date = new
Date(states['sun.sun'].attributes.next_setting); var sunset_time =
sunset_date.toLocaleDateString('en-GB', options).split(',')[1]; return
`<ha-icon icon='mdi:weather-sunset-up' style='width: 12px; height:
12px; color: var(--paper-item-icon-active-color);'></ha-icon> <span
style='align: left;'>${sunrise_time}</span> <br> <ha-icon
icon='mdi:weather-sunset-down' style='width: 12px; height: 12px;
color: var(--paper-item-icon-active-color);'></ha-icon> <span
style='align: left;'>${sunset_time}</span>`; ]]]
- cpufield: >-
[[[ return `<ha-icon icon='mdi:thermometer' style='width: 12px;
height: 12px; color: var(--paper-item-icon-active-color);'></ha-icon>
<span><span style='color:
var(--text-color-sensor);'>${Math.round(entity.attributes.forecast[0].templow)}°C
-
${Math.round(entity.attributes.forecast[0].temperature)}°C</span></span>`
]]]
- ramfield: >-
[[[ var degree = 45; var angle = entity.attributes.wind_bearing +
22.5; var direction = (angle >= 0 * degree && angle < 1 * degree) ?
'N' : (angle >= 1 * degree && angle < 2 * degree) ? 'NE' : (angle >= 2
* degree && angle < 3 * degree) ? 'E' : (angle >= 3 * degree && angle
< 4 * degree) ? 'SE' : (angle >= 4 * degree && angle < 5 * degree) ?
'S' : (angle >= 5 * degree && angle < 6 * degree) ? 'W' : (angle >= 6
* degree && angle < 7 * degree) ? 'NW' : 'N'; return `<ha-icon
icon='mdi:weather-windy' style='width: 12px; height: 12px; color:
var(--paper-item-icon-active-color);'></ha-icon> <span><span
style='color: var(--text-color-sensor);'>${direction}
${Math.round((entity.attributes.wind_speed || 0))}kph</span></span>`
]]]
- sdfield: >-
[[[ return `<ha-icon icon='mdi:water-percent' style='width: 12px;
height: 12px; color: var(--paper-item-icon-active-color);'></ha-icon>
<span><span style='color:
var(--text-color-sensor);'>${(entity.attributes.humidity || 0)}%
<ha-icon icon='mdi:thermometer' style='width: 12px; height: 12px;
color: var(--paper-item-icon-active-color);'></ha-icon>
${(entity.attributes.temperature || 0)}°C</span></span>` ]]]
Has anyone tried to call the alarm service to set it from this button card? It works when I set an input boolean but when trying to call the service to arm the alarm to home or away, I get a service call error. It works just fine when I call it from the developer tools service menu.
When I click the button from lovelace UI, I get this error like its sending the command to âturn offâ
My Yaml:
cards:
- cards:
- card:
card:
entities:
- alarm_control_panel.ha_alarm
entity: alarm_control_panel.ha_alarm
state:
- color: white
name: Armed Away
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_away
service_data:
entity_id: alarm_control_panel.ha_alarm
value: disarmed
icon: 'mdi:lock-open'
type: 'custom:button-card'
conditions:
- entity: alarm_control_panel.ha_alarm
state: disarmed
type: conditional
style:
'--paper-item-icon-color': white
background-color: 'rgba(14, 7, 7, 0.3)'
background-size: 100% 68px
border: 'solid 1px rgba(100,100,100,0.3)'
border-radius: 5px
box-shadow: '3px 3px rgba(0,0,0,0.4)'
type: 'custom:card-modder'
- card:
card:
entities:
- alarm_control_panel.ha_alarm
entity: alarm_control_panel.ha_alarm
state:
- color: white
name: Armed Home
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_home
service_data:
entity_id: alarm_control_panel.ha_alarm
value: disarmed
icon: 'mdi:lock-open'
type: 'custom:button-card'
conditions:
- entity: alarm_control_panel.ha_alarm
state: disarmed
type: conditional
style:
'--paper-item-icon-color': white
background-color: 'rgba(14, 7, 7, 0.3)'
background-size: 100% 68px
border: 'solid 1px rgba(100,100,100,0.3)'
border-radius: 5px
box-shadow: '3px 3px rgba(0,0,0,0.4)'
type: 'custom:card-modder'
type: horizontal-stack
type: vertical-stack
I donât see any errors in logs or elsewhere other than the toast pop.
1 Like
The tap_action is a main config entry of button-card, itâs not in the state array.
Well that definitively fixed it. Thank you! The odd thing is that I have the input_boolean service being called there without a problem. Then again, that is in fact supposed to be getting set to off when I hit the button so likely covering up the fact its incorrectly configured. Thanks again!
For input boolean, toggle is the default, thatâs why it works: Your config is not used 
haha yea, lucky for me, the card only shows up when the state is âonâ and I was calling the off service. Toggle works perfectly in my scenario every time due to that.
Sometimes the YAML indentations get me, especially when I have multiple stacks to force the cards to show up in a specific way. Thanks again for the help!
I just want to say thank you again!!
I love this latest version of your card. My UI is 99.9% custom button card.
There are so many uses for it, only limited by your imagination or skill level 
2 Likes
This is really a fantastic Lovelace card: great work !
I have a quick question: I try to truncate some text using a filter:
It works in the template editor in Developer tools, but not in your button-card - am I doing something wrong ?:
{{states['sensor.last_boot'].state|truncate(20, True, ' ', 0)}}
WORKS !
custom_fields:
boot: >
[[[
return `<ha-icon
icon="mdi:bootstrap"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>: <span style="color: var(--text-color-sensor);">${states['sensor.last_boot'].state|truncate(20, True, ' ', 0)}</span></span>`
]]]
best regards,
A template in button-card needs to be written in javascript, not jinja2, thatâs why it doesnât work for you.
youâre right, my error !
thx
It works: (is this the best way to do this ?)
[[[
return `<ha-icon
icon="mdi:bootstrap"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>: <span style="color: var(--text-color-sensor);">${(states['sensor.last_boot'].state).substr(0,16)}</span></span>`
]]]
Chris
Hi, I have a problem with getting âtap_actionâ to work. I want a sensor to show the status of my garage door and a switch to open the door by using tap_action to toggle the switch.
Iâm getting no response and an error message: Uncaught TypeError: Cannot assign to read only property â0â of string âserviceâ
- type: 'custom:button-card'
entity: binary_sensor.openclose_6
icon: 'mdi:garage'
tap_action: service
service:
domain: switch
action: turn_on
data:
entity_id: switch.garageport
What is wrong?
quite a bit. It looks like youâre trying to just copy something from a script rather than read on how to use actions
Thanks iantrich!
I have tried to read but it seems I have been looking at the wrong place
Now itâs working fine!