Did you ever figure this out? Looking for the same functionality.
@paddy0174
I have done a lot of tests, but I just canāt align the icons as I would like.
For example here I would like to align the 3 icons to the right centering them with the left icon which is larger.
I have tried with various methods that I know but I have not been able to obtain the desired result.
I would like to have it like that:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
style: |
ha-card {
box-shadow: none;
cards:
- type: custom:button-card
styles:
card:
- font-size: 10px
icon:
- width: 50px
name:
- font-weight: normal
- font-size: 20px
entity: sensor.stato_riscaldamento
color: rgb(128, 128, 128)
state:
- value: IN FUNZIONE
color: rgb(255, 0, 0)
show_state: true
show_name: true
show_label: true
- type: custom:button-card
styles:
card:
- font-size: 9px
icon:
- width: 40px
name:
- font-size: 13px
entity: switch.riscaldamento_00_off
name: SPEGNI
icon: hass:power
- type: custom:button-card
styles:
card:
- font-size: 9px
icon:
- width: 40px
name:
- font-size: 13px
entity: switch.riscaldamento_20_on
name: 18Ā° ON
icon: hass:fire
- type: custom:button-card
styles:
card:
- font-size: 9px
icon:
- width: 40px
name:
- font-size: 13px
entity: switch.riscaldamento_20_on
name: 20Ā° ON
icon: hass:fire
- type: entities
entities:
- entity: automation.riscaldamento_programmato
name: Riscaldamento Automatizzato
icon: hass:calendar-clock
style: |
:host {
--paper-item-icon-color:
rgb(255, 128, 0);
}
state_color: false
Iāve been trying to use a global variable but still getting a ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading āstateā) error message. Any hints what Iām missing here?
type: custom:button-card
entity: sensor.wallbox_power
triggers_update:
- binary_sensor.Wallbox_charging
state_display: |
[[[
var sensor_state = (states['binary_sensor.Wallbox_charging'].state);
if (sensor_state == "off")
return "----";
else
return "0000"
]]]
Equal comparisons in javascript require 3 equal signs. I think you should also end the last return line with a semi-colon too.
See if this works:
[[[
var sensor_state = (states['binary_sensor.Wallbox_charging'].state);
if (sensor_state === "off")
return "----";
else
return "0000";
]]]
Iām trying to concatenate a variable to create a dictionary and Iām wondering if anyone has gotten something to work.
Basically, I need to have the same value (ie: 255,255,0) reflected in two formats
rgb(255,255,0)[255,255,0]
So Iām trying to do something like
template:
variables:
color: āā
styles:
card:
- background: >
[[[ return ārgb(ā + variables.color + ā)ā ]]]
tap_action:
action: call-service
service: light.turn_on
service_data:
rgb_color: >
[[[
return '[' + variables.color + ']';
]]]
- type: custom:button-card
template: template
variables:
color: 255,255,0
However, the concatenation doesnāt work no matter how I try it / quote it / back tick template it.
Anyone have any thoughts on a good way to accomplish this?
edit: OMG, Iām an idiot.
I have no idea why I was trying to concatenate instead of just return variables.color.split(ā,ā).
@sahni make the W lowercase. Entities are always lowercase.
@reste_narquois you can use ===, but it isnāt necessary. Itās a strong coercive check ā so it also checks types. @sahniās error is with the state. The state is null, and you canāt get the attribute of null (which is what the error says).
1 Like
Thanks Pieter, that solved the problem. I didnāt know that entities have to be always lowercase
1 Like
Iām sorry, still busy with the minimalist-āthemeā, so not a lot of time to answer. Sorry, really! 
A few things upfront. I changed from custom:stack-in-card back to the native HA cards, vertical-stack and horizontal-stack. I had a few problems with the custom-card, so Iād say change back and see if things get better.
If you work with resizable/responsive layouts (thatās what lovelace is), Iād advise against using fixed width or height statements (no px, use % or em). If you imagine how a browser is working with this configuration, it canāt get aligned correctly. Imagine you have a div that spans the whole width (100%), assuming in relaity thatās 1000px. Now we put a simple 1px dot in the middle. Would be 500px from the left. Now change the view from 1000px to 999px. Where should your dot sit now? In theory on 499.5px, but half pixels?! So it ends up on 499px and your layout is off by 1px, and you canāt catch that. If you use % or em you will make your life easier.
Leave out the aspect_ratio. It mostly complicates the designs, as it changes things in the background. It is better to configure such things by yourself. If you need a bigger button, thereās always a 125% setting available, eg. for width, height and so on. I never use aspect_ratio, it twice shot my layout and I had to start new.
Iād start your configuration differently:
Take a vertical-stack and put in one (!) button-card, and your switch. In the button-card setup a grid-template with four custom-fields where you put in the ārealā four buttons (button-cards). That should give you a more even layout an it is better configurable.
Oh, and before I forget: Leave all the unimportant stuff out for the first steps. What you want is the icon aligned, the text comes afterwards.
Hello,
I creatred a button-card in another button-card. Iām a complete newbie in html and css. Can anybody explain, how to remove the white boxes around the small icons?
And hereās the code:
type: custom:button-card
entity: binary_sensor.terrassentur
show_state: true
show_name: true
show_label: true
aspect_ratio: 1/1
state:
- value: 'off'
icon: mdi:door
styles:
card:
- background-color: gainsboro
icon:
- color: lightslategray
state:
- color: lightslategray
- value: 'on'
icon: hue:room-other
styles:
icon:
- color: red
- styles:
card:
- background-color: red
icon:
- color: white
value: unavailable
styles:
icon:
- top: '-25%'
- left: 5%
- position: absolute
card:
- border-radius: 5px
name:
- font-size: 12px
- font-weight: bold
- top: 60%
- left: 8.1%
- position: absolute
label:
- align-self: end
- padding: 7px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
state:
- font-size: 12px
- top: 77%
- left: 8.1%
- position: absolute
custom_fields:
lueften:
- top: 5%
- left: 63%
- position: absolute
batterie:
- top: 30%
- left: 63%
- position: absolute
tap_action:
action: more-info
hold_action:
action: more-info
custom_fields:
batterie:
card:
type: custom:button-card
entity: sensor.wz_terrasentuer_battery
icon: mdi:check
show_icon: true
size: 100%
show_state: false
show_name: false
show_label: false
color_type: icon
state:
- value: ok
icon: mdi:battery
styles:
icon:
- color: green
- value: low
icon: mdi:battery-10
styles:
icon:
- color: red
- styles:
card:
- background-color: red
icon:
- color: white
value: unavailable
styles:
card:
- width: 25px
- height: 25px
- box-shadow: 0 0 0 0
lueften:
card:
type: custom:button-card
entity: binary_sensor.lueften_wohnzimmer
icon: mdi:check
show_icon: true
size: 100%
show_state: false
show_name: false
show_label: false
color_type: icon
state:
- value: 'off'
icon: mdi:close
styles:
icon:
- color: green
- value: 'on'
icon: mdi:alpha-l-box
styles:
icon:
- color: green
- styles:
card:
- background-color: red
icon:
- color: white
value: unavailable
styles:
card:
- width: 25px
- height: 25px
- box-shadow: 0 0 0 0
Hey guys,
Is there a way to wrap these buttons to a new line within the same ācardā space? instead of them being all squashed up like this?
Im using Samās code that Ive kinda bastardised
This is my code;
Iām sure Iām just missing something, but I donāt know what
Thanks!
EDIT: Just FYI, the top two lines are two different cards. They look a bit weird, id love to be able to get them to wrap to two lines within one card as well.
Also as Iām sure you can tell by my terminology, I know nothing about CSS etc. I can seem to work things out most of the time though if Iām pointed in the right direction LOL
EDIT
LOL
TYPE: Grid
Now I just need to work out the spacing
Ok,
Im stumped with the spacing here?
this is one of the buttons, if anyone has any ideas, would be awesome
type: grid
cards:
- type: custom:button-card
color: transparent
entity: input_select.room_lights
show_name: true
aspect_ratio: 2/1
color_type: label-card
name: Bedroom
icon: phu:rooms-bedroom
state:
- icon: phu:rooms-bedroom
styles:
icon:
- color: white
- width: 40px
name:
- color: white
- font-size: 12px
- padding-top: 5px
value: Bedroom
- icon: phu:rooms-bedroom
styles:
icon:
- color: white
- opacity: 0.5
- width: 40px
name:
- color: white
- font-size: 12px
- padding-top: 1px
operator: default
styles:
icon: null
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.room_lights
option: Bedroom
EDIT: it was render as squares
Got there in the end
I have a short question regarding show_last_changed. If I use this option, it should show me the last_changed attribute from the sensor. So far, so good.
Unfotunately after a restart of HA I get the time from the last restart, despite the dev-tools show the correct time from the last change.
Anyone an idea?
Thatās how the last changed property works. Dev tools doesnāt show this, so Iām not sure how youāre getting that.
1 Like
FYI read this, last_changed is not an attribute btw.
2 Likes
Thanks @Petro for the link! 
In theory I know that, but I found the dev tools show the real value for last_changed and not the HA restart. Thatās why I was working with this for a while now.
In the dev-tools I did a simple
{{ states.input_boolean.puppy_big_out.last_changed }} #gives the "real" timestamp from the last change
opposing to button-card that shows the HA restart timestamp (friendly format).
I use this in custom:logbook-card (link) as well, and there it shows the real value, too. Only button-card does show the value from the restart?
Can it be, that button-card works with the last_updated state attribute? That would explain the difference, but I havenāt checkedā¦
Last changed 100% gives you the last value, which will be the restart if you restarted, it will not give you anything before the restart timestamp. When did you restart last? Paste this into your template editor and youāll see they all match around the restart time and build up later dates. So if you restarted yesterday, most that donāt update once a day will be yesterday while the rest will be random times between yesterday and today.
{{ states | map(attribute='last_changed') | map('string') | sort | list }}
Logbook will show you the histories last changed, not whatās on the state object.
There is no last_updated attribute. There is a last_updated property. It behaves very similar to last_changed in that it will always be past your last restart.
1 Like
Hello there, hope someone could help me.
I canāt figure out to stretch my mini-graph-card inside a button-card. There is a space between bottom of the card and the graph.
The only thing which is working is increasing the height of the row with grid-template-rows, but the aspect_ratio 1/1 isnāt kept.
Hereās my code :
- type: custom:button-card
aspect_ratio: 1/1
icon: mdi:chair-rolling
entity: sensor.ble_temperature_thermometre1
name: Bureau
custom_fields:
graph:
card:
type: custom:mini-graph-card
entities:
- sensor.ble_temperature_thermometre1
show:
icon: false
name: false
state: false
line_width: 5
hu: |
[[[
return `<ha-icon
icon="mdi:water-percent:"
style="width:20px;color: skyblue;">
</ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.ble_humidity_thermometre1'].state}%</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer:"
style="width:20px;color:var(--accent-color);">
</ha-icon><span>${entity.state}Ā°C</span>`
]]]
styles:
custom_fields:
graph:
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"n i" "temp hu" "graph graph"'
- grid-template-columns: 50% 50%
- grid-template-rows: 1fr 1fr 1fr
- overflow: unset
name:
- font-size: 16px
- color: white
state:
- font-size: 10px
- color: white
And with setting
styles:
grid:
- grid-template-rows: 30% 30% 100%
The card is higher than others in my horizontal stackā¦
Many thanks for your help
Thanks @petro! I did some more checks and it is like you said. The dev-tols show the same timestamp as button-card. Must have been a mixup or me not looking close enough. So far, so good, thank you!
But I still didnāt get what I wanted. 
You donāt happen to know where I could get the last time an input_boolean was switched (preferrably to on) even with one or many HA restarts in between? In theory the value the logbook card is using. I can look it up in logbook card, but if you would know it right awayā¦ 
Thank you!
There is no easy way to do it. The fastest to the goal option would be to create an input_datetime and set it in the automation that turns on the boolean.
1 Like
Hello all,
I was just made aware of this great card and am trying to get it to work.
I had opened a thread describing my problem here https://community.home-assistant.io/t/how-to-change-button-color-depending-on-temperature/357273
I donāt want to spam this thread so I will only repeat the vital code here
Anyway, I am trying to create a button that sets the thermostat temperature and also changes itās color based on the current temperature.
- type: button
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 18
target:
entity_id: climate.eq_3_master_bedroom
So whenever the temperature differs from 18, I would like the button to be grey. Whenever the value equals 18, I would like it to be red.
However, the state itself is not ā18ā. The temperature is a state attribute.
The value has to be written differently, but I do not know how.
type: custom:button-card
entity: climate.eq_3_living_room
color: rgb(192, 192, 192)
state:
- value: 18
color: rgb(255, 0, 0)
icon: mdi:fire-off
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 18
target:
entity_id: climate.eq_3_master_bedroom
Could someone help me please?