This is fantastic! Battery monitoring was on my to-do list.
Oh was it that simple 
didn’t know you could assign an icon like that. That is just great.
I understand the operator function a lot better now, thanks a lot @RomRider
That’s correct, if you were going to use my config “as-is” you’d need to use YAML mode. However, you could still take bits and pieces of it to use with the UI editor.
this would be a great opportunity to ask you to have a look at my earlier feature request for icon_template, (might have been snowed under here: Lovelace: Button card)
though in this case the battery icon might be better served with device_class battery which automatically changes all these icons… the icon template could color like:
icon_color: >
if (state > 75) return 'green';
if (state > 50) return 'yellow';
if (state > 25) return 'orange';
if (state > 10) return 'brown';
return 'red';
I will not duplicate features @Mariusthvdb. The state object can cover all those request and I prefer declarative YAML over javascript.
Thanks, though I am truly amazed tbh…
Considering you allow entity_picture_template (which is magic, and working wonders) among the other templates, this would be the logical thing to add wouldn’t it? You’ve introduced card templates to declutter the config, you’ve even created a dedicated unclutter card. And very glad you did!
Adding this template option would seriously enhance the options of the Button card while in the same time, seriously make it easier (and much much shorter) to configure, maintain and debug. Talk about uncluttering, this would be it 
Just look at all the code doubling in your example which 1 simple template could reduce significantly. Less code, less risk for errors.
added to that, sometimes it can be useful to have the same functionality in several ways:
state:
- operator: '>'
value: 0
styles:
card:
- color: '#555B65'
- background-color: '#f0c209'
icon:
- color: '#555B65'
and
state:
- operator: template
value: return entity.state > 0
styles:
card:
- color: '#555B65'
- background-color: '#f0c209'
icon:
- color: '#555B65'
replace the value 0 in the last example with a state of another entity, and it makes sense to use the template variant.
Anyways, really hope you might reconsider at sometime.
HI,
have you given the <br> in name issue some thought yet? Would be really cool to have multiline names possible. I obviously tried it before asking but no such luck yet using
name_template: >
'Master' + "<br>" + 'bedroom'
also, will you be developing this button-cards-in-card Lovelace: Button card
Would be the final clincher…(#fingerscrossed)
Could you please share your code on the section/divider for covers and living room lights.
It looks awesome how you have some customized buttons on them!
I am sorry if this is shown somewhere in this post already… this post is just so huge 
Is there different configuration for toggling lights and switches?
I’ve configured exactly the same switch and light, the switch toggle works perfect, but when I use it with light - it always opening “more-info” popup like this:
- action: toggle
color: auto
color_off: '#333333'
color_type: card
default_color: '#997701'
entity: light.8331804184f3eb9c0e4a
icon: 'mdi:lightbulb-outline'
name: Salon
style:
- font-size: 12px
- font-weight: bold
- text-transform: none
type: 'custom:button-card'
- action: toggle
color: auto
color_off: '#333333'
color_type: card
default_color: '#997701'
entity: switch.kitchen_lights
icon: 'mdi:lightbulb-outline'
name: Kitchen
style:
- font-size: 12px
- font-weight: bold
- text-transform: none
type: 'custom:button-card'according to the docs, the proper use for tap is:
tap_action:
action: toggle
and if you do not define it, it is by default toggle.
Thanks, been there already, still the same (it does the toggle but always opening the more-info popup):
- tap_action:
action: toggle
color: auto
color_off: '#333333'
color_type: card
default_color: '#997701'
entity: light.8331804184f3eb9c0e4a
icon: 'mdi:lightbulb-outline'
name: Salon
style:
- font-size: 12px
- font-weight: bold
- text-transform: none
type: 'custom:button-card'You’re probably not using the latest version of the card and if you do, don’t forget to clear your cache.
You configuration is valid for the version 0.4, not valid for any version after that (default_color, color_off, … that’s deprecated for a long time already)
I don’t think I’ve shared that, here’s the code:
### That's for the covers
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: header_with_other_stuff
name: Covers
- type: custom:button-card
template: header_icon_middle
icon: mdi:arrow-up-thick
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.all_covers
- type: custom:button-card
template: header_icon_middle
icon: mdi:stop
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: cover.all_covers
- type: custom:button-card
template: header_icon_end
icon: mdi:arrow-down-thick
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.all_covers
### That's for the lights:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: header_with_other_stuff
name: Living Room Lights
- type: custom:button-card
template: header_icon_end
icon: mdi:power
tap_action:
action: call-service
service: switch.turn_off
service_data:
entity_id: switch.all_living_room
That’s for the templates used:
header:
styles:
card:
- padding: 5px 15px
- background-color: var(--paper-item-icon-active-color)
name:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
label:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
header_with_other_stuff:
template: header
styles:
card:
- border-top-right-radius: unset
- border-bottom-right-radius: unset
header_icon:
size: 50%
styles:
card:
- height: 100%
- width: 50px
- background-color: var(--paper-item-icon-active-color)
icon:
- color: var(--primary-background-color)
header_icon_middle:
template: header_icon
size: 50%
styles:
card:
- border-radius: unset
header_icon_end:
template: header_icon
styles:
card:
- border-top-left-radius: unset
- border-bottom-left-radius: unset
1 Like
I think I might know…
Are you enclosing the button in an entities card? Like so:
type: entities
entities:
- type: custom:button-card
...
If that is the case… I don’t think there is a work around. It will always trigger more-info.
You should try custom:vertical-stack-in-card, if you are trying to group a button with say… for example a lovelace-slider-entity-row.
It would be funny if this is the reason, because I just tried doing this lol.
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 
1 Like
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!
1 Like
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 
2 Likes
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…
2 Likes