Just as an FYI, with the latest beta, that card won’t update when there is an update to the entity referenced in the variable unless you set the triggers_update config value to the entity from the variable.
I think I’ll introduce one time (on init) evaluation of templates in the triggers_update field
Is there any way to make a button appear quicker for switches?
I have switch templates for my harmony remote. Tap a button and the harmony hub switches on the activity. Problem is the hub doesn’t report back instantly so it appears the button hasn’t been done (5-10 second delay in the button updating from off to o)
I guess this is more a harmony thing as hue bulbs and my RM mini are pretty responsive. Just wondering if it’s possible to fake it some how for a better experience. If not I might have to think of another method for my harmony.
Nope, this is a harmony thing. The device itself is reporting that it’s off. You could get fancy with a switch template and an input boolean. But you’d need to pair it with an automation that monitors the current activity.
How do I get to display status (ready) of zwave stick. Following snippet works fine in Templates editor.
{{ states('zwave.aeotec_zw090_zstick_gen5_us') }}
But when I use the same to display this status as a label then it’s showing up an error in Chrome Dev console. What am I missing?
label: >
[[[
return states['zwave.aeotec_zw090_zstick_gen5'];
]]]
Error in Chrome Dev Console:
VM64335:3 Uncaught (in promise) TypeError: states is not a function
at HTMLElement.eval (eval at _evalTemplate (button-card.js:1578), <anonymous>:3:16)
at HTMLElement._evalTemplate (button-card.js:1578)
at HTMLElement._getTemplateOrValue (button-card.js:1584)
at HTMLElement._buildLabel (button-card.js:1641)
at HTMLElement._gridHtml (button-card.js:1741)
at HTMLElement._buttonContent (button-card.js:1737)
at HTMLElement._cardHtml (button-card.js:1712)
at HTMLElement.render (button-card.js:1534)
at HTMLElement.update (button-card.js:569)
at HTMLElement.performUpdate (button-card.js:479)
Looks very good! Is your config available somewhere? Can you please share it otherwise?
button-card uses javascript, not jinja templates.
If you want to access the state you have to do states['entity_id'].state
label: >
[[[
states['zwave.aeotec_zw090_zstick_gen5'].state;
]]]
I already tried that but it fails.
VM73418:4 Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
at HTMLElement.eval (eval at _evalTemplate (button-card.js:1578), <anonymous>:4:18)
at HTMLElement._evalTemplate (button-card.js:1578)
at HTMLElement._getTemplateOrValue (button-card.js:1584)
at HTMLElement._buildLabel (button-card.js:1641)
at HTMLElement._gridHtml (button-card.js:1741)
at HTMLElement._buttonContent (button-card.js:1737)
at HTMLElement._cardHtml (button-card.js:1712)
at HTMLElement.render (button-card.js:1534)
at HTMLElement.update (button-card.js:569)
at HTMLElement.performUpdate (button-card.js:479)
That’s telling you that the entity doesn’t exist. Verify the name used in the quotes… i.e. 'zwave.aeotec_zw090_zstick_gen5' probably has a spelling error. Looking at mine, i’d expect the name to be 'zwave.aeotec_zw090_z_stick_gen5'
Duah. I can take the stupid award for today. 
This entire time I was missing _us at the end of the entity.
zwave.aeotec_zw090_zstick_gen5_us
I was banging my head trying out different combinations. LOL
label: >
[[[
return entity.state == "ready" ? "Online" : "Offline"
]]]
It’s happened to the best of us, I wouldn’t worry.
Hi, I would like to make the light buttons automatically scale to the width on the horizontal stack but can not work it out any help would be greatly appreciated.
I’m using the bellow template:
button_card_templates:
light_button:
hold_action:
action: more-info
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
layout: icon_label
show_label: true
show_name: true
state:
- styles:
card:
- box-shadow: '0px 0px 10px 3px #ffeb8a'
icon:
- color: '#ffeb8a'
value: 'on'
styles:
card:
- width: 100px
- height: 100px
- border-radius: 0px
- margin: 0px 0px 0px 0px
- padding: 0px 0px
- '--paper-card-background-color': 'rgba(230, 230, 230, 0.7)'
grid:
- grid-template-rows: 70px auto 0px
- grid-template-columns: 60px auto
icon:
- width: 50px
- color: 'rgba(77, 77, 77, 0.7)'
label:
- font-size: 17px
- font-weight: bold
- color: 'rgba(77, 77, 77, 0.7)'
name:
- justify-self: start
- align-self: end
- padding: 9px 10px
- font-size: 17px
- font-weight: bold
- color: 'rgba(77, 77, 77, 0.7)'
tap_action:
action: toggle
The code for the button:
entity: group.master_lights
name: Master Off
template: light_button
type: 'custom:button-card'
Use aspect_ratio: 1/1 for square buttons they scale to the width of the device and remove the css width and height.
I have tried that but I think i’m not putting it in the right place. Where would aspect_ratio: 1/1 go?
Ok I worked it out, I removed the following from my template:
- width: 100px
- height: 100px
Everything works as it should now.
I have just noticed that my default button-cards will show its icon as white for both ON and if the device is “unavailable” (Tuya light). Thus any TUYA devices that have no power and unavailable are showing a white icon as if they were ON.
Can someone help in how I define unavailable and maybe change the icon and color. Here is a simple card
color: auto
entity: light.08836146600194dc5165
icon: 'mdi:lamp'
name: Trent
type: 'custom:button-card'
Sorry for a noob question …
I have been trying for many hours now but cant get this correct.
How do I stop the cards from ending up outside of the edge?
How do I add a gap between the cards to “glow” individualy?
Thanks // Fredrik
Template:
button_card_templates:
custom_button_light_active_glow:
hold_action:
action: more-info
layout: icon_label
show_label: true
show_name: true
show_state: false
state:
- styles:
card:
- '--paper-card-background-color': 'rgba(40, 40, 40)'
- box-shadow: 0px 0px 20px 3px var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
label:
- color: white
name:
- color: white
state:
- color: white
value: 'on'
- styles:
label:
- color: 'rgba(0, 0, 0, 0.0)'
value: 'off'
styles:
card:
- border-radius: 15px
- height: 125px
- margin: 30px 60px 30px 30px
grid:
- grid-template-rows: 30px auto 30px
- grid-column-gap: 10%
- grid-template-columns: 1fr 1fr 1fr
icon:
- align-self: end
- height: 60px
- width: 60px
label:
- align-self: end
- padding: 1px
- font-size: 15px
- font-weight: bold
- font-family: Helvetica
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 5px 10px
tap_action:
action: toggle
type: 'custom:button-card'
Cards:
cards:
- entity: light.600040352462ab0fdc9e
icon: 'mdi:spotlight'
name: TV Spotlights
template: custom_button_light_active_glow
label: |
[[[
var bri = states['light.600040352462ab0fdc9e'].attributes.brightness;
return ' ' + (bri ? bri : '0') + '%';
]]]
type: 'custom:button-card'
- entity: switch.25803704d8f15b012287_2
icon: 'mdi:lightbulb'
name: Tak Soffbord
template: custom_button_light_active_glow
type: 'custom:button-card'
- entity: switch.2472357684f3ebeca95b
icon: 'mdi:lightbulb'
name: Skåp
template: custom_button_light_active_glow
type: 'custom:button-card'
type: horizontal-stack
remove height and margin from the card style. more specifically, margin is pushing it. You can probably keep height. But typically if you want buttons that are the same size, use ratio don’t use height. Height will make the button look weird on specific platforms. May look great on mobile but then on desktop it’ll look small.
You’ll have to specify what happens for the unavailable state:
color: auto
entity: light.08836146600194dc5165
icon: 'mdi:lamp'
name: Trent
type: 'custom:button-card'
state:
- value: unavailable
color: THE_COLOR_YOU_WANT
Okey, but how do get them located example 30px away from the edge and with 30px gap between them?
I don’t want them to collide or get the glow to be cut off by the edge…
You have to use card-mod to change the margin between elements on the horizontal-stack not on button-card.