Ah its the vertical-stack-in-card! Brilliant!
I was just able to achieve a similar result for only 1 button following your grid example in the docs:
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-template-columns: 1fr min-content
icon:
- width: 20px
- height: 20px
- color: var(--primary-background-color)
Thanks!
Yes, thatās another option, but I didnāt want to whole line to be a clickable, thatās why I went this way. Also because it only works for 1 icon, not multiple 
Yes, i was using it in entities card. once moved to custom:vertical-stack-in-card everything working as expected (both tap and hold actions).
Thanks!
Hi,
Struggling a bit here, because I am not yet familiar enough with JS, so please help me:
I need to truncate the last 14 characters of an entities state. In this case a variable with as its state the last triggering motion sensor. Since all of these motion sensors have āmotion_sensorā as the end of their names, I need to cut that, to be able to show only āFrontdoorā on the Button.
I have fiddled a bit, and now use a label_template to show the truncated State 
Could we set this in the State field somehow?
- type: custom:button-card
template: button_motion
name: Last Motion
entity: variable.last_motion
show_label: true
show_state: false
show_last_changed: false
label_template: >
return entity.state.substr(0, entity.state.length-14) +
"<br>" + entity.state.last_updated
As you can see Ive also added the last_changed to the label, because show_last_changed which I use otherwise, takes up the space of the label, ā¦ but, how to format that so it says ā1 minute agoā, just like the show_last_changed does, as we can do in Jinja with relative.
fwiw, this is the variable construction automation:
action:
service: variable.set_variable
data:
variable: last_motion
attributes_template: >
{
"history_1": "{{ variable.state }}",
"history_2": "{{ variable.attributes.history_1 }}",
"history_3": "{{ variable.attributes.history_2 }}",
"history_4": "{{ variable.attributes.history_3 }}",
"history_5": "{{ variable.attributes.history_4 }}",
"history_6": "{{ variable.attributes.history_5 }}",
"history_7": "{{ variable.attributes.history_6 }}",
"history_8": "{{ variable.attributes.history_7 }}",
"history_9": "{{ variable.attributes.history_8 }}",
"history_10": "{{ variable.attributes.history_9 }}"
}
data_template:
value: >
{{ trigger.to_state.attributes.friendly_name|replace('motion sensor','') }}:
{{as_timestamp(states.variable.last_motion.last_changed)| timestamp_custom('%X') }}
thanks for having a look.
Just split it at the āTā and take the first object
You canāt as it will not update automatically in the frontend, thatās why there is a specific show_last_changed option.
Why donāt you just put the name of your motion sensor in the last_motion variable (without the timestamp in the string), and just use show_last_changed: true and show_state: true? That would be way more easy, more clean and working 
Keep things simple, thatās the rule, do not try to bend things to do something they are not supposed to do 
of course itās a bit difficult to see, since it falls off off the button, but the label shows the latest changed, doesnt it?
Ill experiment with that, but the start of this was I needed to truncate the entity.state, which still had āmotion_sensorā at the end of all states.
to answer this suggestion, which in itself is viable of course:
I need to have this historic view:
so need to have the timestamp in there somewhere.
yep, agree, if and when possible. Sometimes we need to get crafty though
agree, again. of course. But now I have to bend my variable for state and attributes, to fit the button ā¦
thereās no more T to split from:
though it still shows on the Buttonā¦?For experiments sake. Ive tried this:
- type: custom:button-card
template: button_motion
name: Last Motion
entity: variable.last_motion
show_label: false
show_state: false
show_last_changed: true
show_name: true
name_template: >
return entity.state.substr(0, entity.state.length-11)
which comes close, only takes out the name of the entity:
If only we could template ( and in this case truncate) the entity.stateā¦ all would be perfectā¦
Or, maybe another workaround: have the name_template accept the
so we can do:
name_template: >
return entity.attributes.name + "<br>" +
entity.state.substr(0, entity.state.length-11)
update
adding to the above reasons for the feature request is this:
Ive followed your suggestion to change the variable only using the name. so the button can use State, Name and show_last_changed. Seems nice at first sight:
further testing however shows a huge deficit of this setup:
the Last motion variable doesnāt change states, when it gets retriggered by the same triggerā¦ which is also depicted on the Button. So the button wont really reflect the action in the Houseā¦
Then keep your time string in the state and remove it in a name_template and append the state to the name template. Iāll fix the <br> issue that you have, so you can use multi lines name. I forgot about this one, thatās why posting FR/Bugs in this forum is not effective, it should go over to github so that I can track them.
Ok wow. I will certainly try. Thank you so very much 
Of course we needed the line brake already because of longer entity namesā¦ so hope this solution will suffice.
If not Iāll come back begging for a state template
please see if you could help me out here. Ive defined a simple button to show the state of my cpu temp. With a few icon color state templates. Iād like the border of the button to follow the icon color and set it to use the active icon color. Which I forgot is the HA default color yellow, and not the color set in the state templates. Could this somehow be set to follow that, or do I have to add a box border shadow in all state too:
- type: custom:button-card
template: button_body
entity: sensor.cpu_temperature
icon: mdi:chip
name: Cpu temp
styles:
card:
- box-shadow: 0px 0px 2px 1px var(--paper-item-icon-active-color)
state:
- operator: '<'
value: 50
styles:
icon:
- color: yellow
- operator: '<'
value: 60
styles:
icon:
- color: green
- operator: '<'
value: 70
styles:
icon:
- color: orange
- operator: '<'
value: 80
styles:
icon:
- color: red
Box shadow in the state with a specific color definition every time.
var(--paper-item-icon-active-color) doesnāt contain a dynamic color, it comes from your theme (or the default value from HA core if you donāt hace a theme)
A trick though (didnāt try but it should work):
styles:
card:
- box-shadow: 0px 0px 2px 1px var(--local-color)
icon:
- color: var(--local-color)
state:
- operator: '<'
value: 50
styles:
card:
- '--local-color': yellow
Etc with all the other states...
yes! it does work. very nice, though I am a bit confused you set the āālocal-colorā under the card setting in the state, and it is also valid for the icon in the main configā¦still, grateful for this ātrickā which does exactly what I was after, albeit the other way round
it also works setting the color in the card config (so it pertains to name, state, label, and border)
for reference:
Iāve changed this verbose buttons setup:
state:
- operator: '<'
value: 50
styles:
icon:
- color: yellow
card:
- box-shadow: 0px 0px 2px 1px yellow
- operator: '<'
value: 60
styles:
icon:
- color: green
card:
- box-shadow: 0px 0px 2px 1px green
- operator: '<'
value: 70
styles:
icon:
- color: orange
card:
- box-shadow: 0px 0px 2px 1px orange
- operator: '<'
value: 80
styles:
icon:
- color: red
card:
- box-shadow: 0px 0px 2px 1px red
in to the variable setup:
- type: custom:button-card
template: button_body
entity: sensor.cpu_temperature
icon: mdi:chip
name: Cpu temp
styles:
card:
- color: var(--local-color)
- box-shadow: 0px 0px 2px 1px
icon:
- color: var(--local-color)
state:
- operator: '<'
value: 50
styles:
card:
- '--local-color': yellow
- operator: '<'
value: 60
styles:
card:
- '--local-color': green
- operator: '<'
value: 70
styles:
card:
- '--local-color': orange
- operator: '<'
value: 80
styles:
card:
- '--local-color': red
Whatās even better, it also works when moved in to the template for the button body:
button_body:
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
icon:
- color: var(--local-color)
lock:
- color: red
card:
- color: var(--local-color)
- border-radius: 6px
- background-color: ivory
- padding-left: 5px
- box-shadow: 0px 0px 2px 1px
name:
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
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
img_cell:
- justify-content: start
- align-items: start
so I only have this in the config:
- type: custom:button-card
template: button_body
entity: sensor.cpu_temperature
icon: mdi:chip
name: Cpu temp
# styles:
# card:
# - color: var(--local-color)
# - box-shadow: 0px 0px 2px 1px
# icon:
# - color: var(--local-color)
state:
- operator: '<'
value: 50
styles:
card:
- '--local-color': yellow
- operator: '<'
value: 60
styles:
card:
- '--local-color': green
- operator: '<'
value: 70
styles:
card:
- '--local-color': orange
- operator: '<'
value: 80
styles:
card:
- '--local-color': red
I probably will have the name use another color, but now have the knowledge to play with all that. Cool!
You might want to add this to the Button Card documentation since it is a great tool!
asked before, but probably in a post with too many questions (sorry):
If one of the fields on a card it too long for the card, it gets the ā¦ at the button border. What it also does is move the line a few px to the right, which looks a bit shambled. Could you find a way to have the files always respect the padding settings on the left side. Have a look:
top Dorm is fine, middle one shifts the state (Corridorā¦) and bottom shifts State (and not the Name, which is also too longā¦)
on mobile this is even more visible, and the 2 lines get shifted if too long:
ps note that the āClearā is translated to Niet gedetecteerdā in Dutch, and even that looks silly. Probably need a PR to change that, or a template to have it show Clear when it is Off
have another āglobalā question.
we can use āāpaper-card-background-color: rgba(255, 255, 240, 0.3)ā to set opacity on background color only (opposed to the opacity: setting which sets opacity on all items of a button).
I use a lot of buttons with a background color, mostly defined by color name. It appears we canāt use the āāpaper-card-background-colorā setting with color name and opacity together?
Made me want to set the opacity in the template, and only use the background color in the button config, since that is button specific. Background-color is defined in State: mostly, since it is state dependent.
The opacity should only hit the background color, and none of the child items of the button. In this case, it would always be set, so not state dependent, hence the desire to set it in the template.
Would the be possible? If yes, please how is that best done?
thanks!
Thatās just how CSS works, nothing special related to button card worth documenting.
That doesnāt happen with me so itās probably your card styles which make this happen. If you share it Iām going to have a look.
Thatās the translation from HA core, I donāt do anything with that. And no, I will not introduce a state template.
Youāre complicating your life manā¦ --paper-card-background-color can be replaced by just background-color. Also, no you canāt use color names with opacity, that not related to --paper-card-background-color, itās how CSS works.
The only thing you could do is something like:
background-color: rgba(1, 2, 3, var(--my-opacity)) in your states styles.
And set:
styles:
card:
- '--my-opacity': 0.5
In the main config part.
But I guess thatās not what you expected. Thereās no way in CSS to specify the opacity of the background outside of background-color: rgba(x, y, z, opacity)
thanks, this is what I use:
buttons:
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: custom:button-card
template: button_motion
name: Dining
entity: binary_sensor.dining_table_motion_sensor
- type: custom:button-card
template: button_motion
name: Auditorium
entity: binary_sensor.auditorium_motion_sensor
- type: custom:button-card
template: button_motion
name: Frontdoor
entity: binary_sensor.frontdoor_motion_sensor
- type: custom:button-card
template: button_motion
name: Dorm
entity: binary_sensor.dorm_motion_sensor
- type: custom:button-card
template: horizontal-filler
and template button_motion:
button_motion:
template: button_body
show_last_changed: true
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- box-shadow: 0px 0px 2px 1px
state:
- value: 'on'
styles:
card:
- color: red
name:
- color: black
icon:
- color: red
# id: on-icon
- value: 'off'
styles:
card:
- color: '#555B65'
- opacity: 0.8
icon:
- color: '#555B65'
# id: off-icon
which uses template button_body:
button_body:
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
icon:
- color: var(--local-color)
lock:
- color: red
card:
- color: var(--local-color)
- border-radius: 6px
- background-color: ivory
- padding-left: 5px
- box-shadow: 0px 0px 2px 1px
name:
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
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
img_cell:
- justify-content: start
- align-items: start
if it is caused by my config, it would have to be the last button_body probably. I have other buttons, using a same setup albeit in 1 config and they behave likewise.
thanks for having a look!
what would be the optimal way to call/run a script on a button?
can we simply set an entity: script.to_run, or do we need to set the tap_action: call-service, service: script.to_run ?
Iām not getting any icons showing up. Has anyone run into this before? This is part of a larger config, so maybe the issue is somewhere else. If this looks right, Iāll drop the config thing in.
- type: vertical-stack
title: Dungeons and Dragons
cards:
- type: vertical-stack
cards:
- type: "custom:button-card"
entity: light.steven_office_lamp
color_type: card
color: rgb(66, 134, 244)
icon: mdi:numeric-1-box-outline
- type: "custom:button-card"
icon: mdi:fire
name: Campfire Lights
tap_action:
action: toggle
service: homeassistant
service_data:
entity_id: input_boolean.appdaemon_campfire
entity: input_boolean.appdaemon_campfire
# City Button
- type: "custom:button-card"
icon: mdi:city
name: City Lights
tap_action:
action: toggle
service: homeassistant
service_data:
entity_id: input_boolean.appdaemon_city
entity: input_boolean.appdaemon_city
edit: Ah, strange. Seems to not work with FireFox?
H all,
Sorry if it was already asked, and I missed it.
Button templates configuration is not working with iOS app?
It is working perfectly in Chrome, but the very same configuration is failing to be loaded in iOS app.
Chrome:
iOS App:
Works fine in FF67. So if you have an issue, clear your cache and update FF.
It works for everyone, so I guess itās a cache issue. Else try the beta version of the ios app.
That was actually the betaā¦
Maybe this is the reason? 
Editā¦ It was actually cache issue.
Never had that beforeā¦ strange.
I have one more question.
Is there an option to reflect a press on a button? I mean in case when a button is executing a script and does not have on and off states, just to change for a second a then go back, to be sure that ui got my tap.
It is really missing for example on a wall tablet when something supposed to happen in another room.
Would be nice.
Thanks in advance.
