You’re not using the latest version of button card. label_template doesn’t exist anymore, it’s just label now. Plus the template would be "[[[ return entity.attributes.temperature + ' °C' ]]]"
I don’t need to differentiate it for these actions, I need it to be different than the default lock icon. Can’t that be done styling the lock, just as we can set the color?
so I understand correctly with unlock_users: unknown, the lock will never be unlocked, and no action at all is possible?
That will be my first custom field, will have to check the docs how to create this overlay, with the lock-alert icon.
well, I want it to be visually different from the regular locks (since the behavior is different), so need another lock icon.
I do want to be able to use a more-info, probably of the locked switch, maybe even use another entity. for now, simply the locked switch as more info, on both tap and hold to be sure.
I noticed that 
since I now need to use it in a custom-field, I must check the docs for setting a custom icon here. don’t suppose you could assist me, please?
thanks for letting me know, appreciated!
@RomRider, maybe you can help me.
i used state custom ui card in the past and i was getting “last-triggered” info for automations as below:
>-
if(!attributes.last_triggered)return null;
var t,s=(new Date()-new Date(attributes.last_triggered))/1e3;
return(
(t=Math.floor(s/86400))?t+(t>1?" days":" day"):
(t=Math.floor(s/3600))?t+(t>1?" hours":" hour"):
(t=Math.floor(s/60))?t+(t>1?" minutes":" minute"):
(t=Math.floor(s))!==1?t+" seconds":" second"
)+" ago";
i would love to get same info with buttoncard but i have no idea how to do it. any help? 
1 Like
A simple
show_last_changed: true
Should do the trick
its still not so simple. last_changed and last_triggered showing different info.
Ah true, the problem with that is that it will not update automatically because your entity will not change over time and the display will not update, that’s why we have a specific show_last_changed option.
Your code should just work in button-card by replacing attributes.last_triggered with entity.attributes.last_triggered but again, it will not update properly 
followed your suggestion to create a custom_field, but have a couple issues…
I would love to position the custom lock exactly as you do with the lock: true option. Could you please let me know what the coordinates and size are? I am now using
custom_fields:
icon: >
[[[ return `<ha-icon icon="mdi:lock-alert" style="width: 22px; height: 22px;"> </ha-icon>` ]]]
and
styles:
custom_fields:
icon:
- color: red
- position: absolute
- left: 70%
- top: 5%
which seems to come close, but just not exactly:
lock: true :
and custom_field:
I did try to make them 20px but then rendered too small again…
also, since I am not using a template, would I still need to use the [[[ ]]] construction? seems the code can be simpler without that, using a fixed ha_icon?
for reference this is my full button template:
button_lock_permanent:
label: >
[[[
var id = entity.entity_id.split('.')[1].slice(3, -9);
return states['sensor.' + id + '_actueel'].state + ' Watt';
]]]
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
tap_action:
action: none
haptic: light
hold_action:
action: more-info
haptic: success
custom_fields:
icon: >
[[[ return `<ha-icon icon="mdi:lock-alert" style="width: 22px; height: 22px;"> </ha-icon>` ]]]
styles:
custom_fields:
icon:
- color: red
- position: absolute
- left: 70%
- top: 5%
icon:
- color: grey
card:
# - color: grey
- background-color: lightgrey
- border-radius: 6px
- padding-left: 5px
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
name:
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
- position: relative
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
state:
- color: green
label:
- color: red
- value: 'off'
styles:
label:
- color: rgba(0, 0, 0, 0.0)
state:
- color: darkgrey
- value: 'unavailable'
styles:
label:
- color: rgba(0, 0, 0, 0.0)
state:
- color: red
thanks for having a look if you would.
1 Like
Damn, that was why it stopped working. Thanks a million. 
The style for the lock is defined here, omit the z-index part.
Regarding the size, not specifying anything should do the trick.
thank you Rom. I am not sure though how to ener that in the template for the button though. Could you assist me here?
Not setting a size is easy 
custom_fields:
icon: >
[[[ return `<ha-icon icon="mdi:lock-alert" > </ha-icon>` ]]]
but the how to use the overlay bit is over my head tbh. Hope you can provide me with a snippet to use
Wowzers that is a lot of templated code. I really love it, but was a bit too complex for what I wanted to achieve. I use grid with a custom field now which seems to look pretty much the same in the end.
Still thanks for sharing this, I might get something useful out of it in the future.
This is what I have created with the grid I already use:
When tapping one of those buttons it will take you to the corresponding page:
And when doing a hold_action/deep_press on these buttons you will get a popup card showing what is on:
Anyways still a big thanks even though I do not use your code 
1 Like
I’ve encountered a strange issue and I’m uncertain whether the problem is related to button-card or elsewhere.
Based on the example cards from the ESXi Custom Component page, I’ve discovered that using hostnames which contain dashes within the button code below will result in the card not rendering. Hostnames with simple, alpha-numeric hostnames work fine.
Does anyone know why this would happen?
- type: custom:button-card
entity: sensor.esxi_stats_vms
name: Win 7
template: esxi_stats_vm
styles:
icon:
- color: >
[[[
if ( states['sensor.esxi_stats_vms'].attributes.HOST-NAME.status == "green")
return "green";
if ( states['sensor.esxi_stats_vms'].attributes.HOST-NAME.status == "warning" )
return "yellow";
return "red";
]]]
custom_fields:
uptime: >
[[[
return `<ha-icon
icon="mdi:arrow-up"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span><span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.HOST-NAME.uptime_hours}</span></span>`
]]]
cpu: >
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.HOST-NAME.cpu_count}</span></span>`
]]]
ram: >
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>Mem: <span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.HOST-NAME.memory_allocated_mb} MB</span></span>`
]]]
state: >
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>State: <span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.HOST-NAME.state}</span></span>`
]]]
In the realm of providing an answer to my own question…
@Navith on Discord managed to find the solution. Changing attributes.HOST-NAME to attributes['HOSTNAME']resolved the problem.
The code I’ve sent you is just CSS, so just copy paste that into your styles for the custom_field, remove the ; from each line and remove z-index completely and you’ll be good to go.
I see, yes, thanks!
so I made it like this now:
custom_fields:
icon: >
[[[ return `<ha-icon icon="mdi:lock-alert" > </ha-icon>` ]]]
styles:
custom_fields:
icon:
- align-items: flex-start
- justify-content: flex-end
- padding: 8px 7px
- opacity: 0.5
- color: red
# /* DO NOT override items below */
- position: absolute
- left: 0
- right: 0
- top: 0
- bottom: 0
# - z-index: 1
- display: flex
but the positioning is not as expected…
coloring, opacity, size seem perfect, so I am getting there…
top: the custom_field,
bottom: the default lock: true
btw, if I enter some text in the custom_fields key it shows at the top alright, only the icon gets positioned incorrectly
custom_fields:
icon: text
would be much appreciated if you’d be able to help me fix that last bit too @RomRider : (position my custom_field icon on the exact spot as the lock: true card)
Hi guys,
i’m finishing to configure my system monitor, and i need help with a title, i need the title of the speed test to match like all the rest, please see pic below:
Any idea i can i do it?
code:
- type: "custom:button-card"
color_type: icon
aspect_ratio: 8/1
name: Speed Test
- type: custom:bar-card
title: Download
title_position: inside
entity: sensor.speedtest_download
max: 200
severity:
- value: 50
color: '#e60000'
- value: 150
color: '#ffa500'
- value: 200
color: '#40bf60'
- type: custom:bar-card
title: Upload
title_position: inside
entity: sensor.speedtest_upload
max: 6
severity:
- value: 1
color: '#e60000'
- value: 3
color: '#ffa500'
- value: 6
color: '#40bf60'
- type: custom:bar-card
title: Ping
title_position: inside
entity: sensor.speedtest_ping
icon: mdi:database
#title_position: inside
max: 200
severity:
- value: 40
color: '#40bf60'
- value: 80
color: '#ffa500'
- value: 200
color: '#e60000'
How did you do it on the Pi-Hole card?
i understand what was the issue, thanks
Use the vertical-stack-in-card to achieve that
1 Like
Hi,
i need help, i want the ac icon to be yellow like below:
but when i turn on the ac it’s default state is “cool”
so i copy the “on state” decluttering and created a new template, but the icon still not turning into yellow. plus i want also know if there is an option when i change it to cool to change icon lets say to snowflake.
decluttering code:
acc:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
- background-color: 'rgba(255,255,240,0.9)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: black
state:
- color: gray
label:
- color: black
id: on-icon
- value: 'cool'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: black
state:
- color: gray
label:
- color: black
id: on-icon
- value: 'off'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
# - opacity: 0.3
label:
- color: black
icon:
- color: 'black'
name:
- color: black
state:
- color: 'black'
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
entity:
