ok thanks, that looks more robust indeed, and Ive added 4px padding, which prevents it from reaching the bottom edge of the button. vertical made the icon appear on top though. Would there be a way to have the icon and name on 1 line again? (could of course use the padding without vertical, but that showed a bit more wobbly)
You hand’t the icon before so I would also just add show_icon: false and you’ll be set 
EDIT: I found a workaround from an earlier @Mariusthvdb post. Changing…
img_cell:
- align-self: start
- text-align: start
to
img_cell:
- justify-content: start
- align-items: start
…fixed the alignment.
Have some weird behavior going on that I cannot explain. Using the Apple Like button example from the gitub page, the icon placement is inconsistent. On Chrome (Desktop) and Safari (iOS), the icon is centered. On Safari (Desktop), the icon is left justified. I’ve cleared the cache numerous times and it doesn’t seem to help. What am I missing?
… now that you mention it. It is not mentioned at all. so it must have taken the icon of the group automatically, caused by the layout: vertical. Will play around some more and see what gives in the various options.
so many of those, this is becoming a ‘grabbelton’ of goodies 
I’m sure I saw it on here but can’t find it now (it is a looong thread).
How do you insert a line break in a name or label template?
try +"<br>"+ ?
label_template: >
var id = entity.entity_id.split('.')[1].slice(3, -9);
return states['sensor.' + id + '_actueel'].state +"<br>"+ ' Watt';
you probably remembered this post for a break in the label (not template), though I can’t get that to work in the name.
Does anyone have an example for a template low battery icon red full battery icon green?
I have a sensor for phone battery and would like to change colour based on below % or above %.
Cheers
How did you do the “under cabinets” card? I use “slider entity row” but I didn’t see an option for the big icon… Is it this component that can do that?
Looks awesome.
It’s actually two custom cards nested inside a horizontal stack which is then nested inside a vertical-stack-in-card.
Although it took me quite a while to fine tune, the actual config is fairly simple. Here’s the code. You should be able to copy/paste with minor adjustments to the entity and name fields.
Button-card Templates
button_card_templates:
vertical-divider-grey:
color_type: blank-card
styles:
card:
- width: 3px
- color: '#292929'
horizontal-divider-grey:
color_type: blank-card
styles:
card:
- height: 3px
- background-color: '#292929'
dimmer-left-button-settings:
template: left-button-settings
icon: mdi:lightbulb
styles:
card:
- width: 160px
Actual Button
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: vertical-divider-grey
- type: custom:button-card
template: vertical-divider-grey
- type: custom:button-card
template: dimmer-left-button-settings
entity: light.kitchen_cabinets
name: Under Cabinets
- type: custom:card-modder
style:
background-color: '#222222'
border-radius: 0px 10px 10px 0px
height: 39px
padding: 8px
card:
type: custom:slider-entity-row
entity: light.kitchen_cabinets
step: 2
full_row: true
- type: custom:button-card
template: vertical-divider-grey
- type: custom:button-card
template: vertical-divider-grey
- type: custom:button-card
template: horizontal-divider-greyHere’s some inspiration: https://github.com/custom-cards/button-card/blob/master/README.md#with-operator-on-state
Woops, I forgot that part 
I’ll add it for the next release
That was my first attempt before asking for help…
…nor could I…
That’s a relief! 
Legend… Thanks very much.
I hate to ask (because you have already given so much) but…
…would it be possible to have templated tap_action, dbltap_action and hold_action?
What would be your use case?
As a general answer, I’d use the config-template-card for that, what do you think?
Actually, I think my case is even more complex than just wanting templated *_action.
I am using buttons to display motion, door and window sensors. I sometimes have door and window sensors in the wrong state (cheap sensors!) so I use a double tap to open a custom-popup-card which allows me to set that sensor’s state via an input_select.
I combined all these buttons to use one template but the motion sensors don’t need a dbltap_action.
I have also realised that motion, door, and window sensors also have different icons (of course!) so would need to template those as well which I don’t think is possible either???
Here is my template after combining Door and Window and before realising the icons were wrong!
EDIT: Also, yes I have still got to template my label properly…
#============================
#=== Door and Window Sensors
#===
#=== If the button card ever allows templated tap_action
#=== this is the name_template...
#=== var sensor_name = entity.attributes.friendly_name;
#=== if (sensor_name.search('PIR') === 0) {
#=== return sensor_name.split('PIR ')[1];
#=== } else if (sensor_name.split(' ')[sensor_name.split(' ').length - 1] === 'Door') {
#=== var sensor_name = sensor_name.replace(' Door', '');
#=== return sensor_name;
#=== } else {
#=== var sensor_name = sensor_name.replace(' Window', '');
#=== var sensor_name = sensor_name.replace('Left', '(L)');
#=== var sensor_name = sensor_name.replace('Centre', '(C)');
#=== var sensor_name = sensor_name.replace('Right', '(R)');
#=== return sensor_name;
#=== }
#===
#============================
door_and_window_sensors:
name_template: >
var sensor_name = entity.attributes.friendly_name;
if (sensor_name.split(' ')[sensor_name.split(' ').length - 1] === 'Door') {
var sensor_name = sensor_name.replace(' Door', '');
return sensor_name;
} else {
var sensor_name = sensor_name.replace(' Window', '');
var sensor_name = sensor_name.replace('Left', '(L)');
var sensor_name = sensor_name.replace('Centre', '(C)');
var sensor_name = sensor_name.replace('Right', '(R)');
return sensor_name;
}
show_label: true
label_template: >
return entity.state === 'on' ? '-MOVEMENT-' : ''
layout: icon_label
aspect_ratio: 2.5/1
size: 50%
state:
- value: "on"
icon: mdi:run
styles:
card:
- box-shadow: 0px 0px 8px 2px var(--secondary-text-color)
icon:
- color: var(--secondary-text-color)
- value: "off"
icon: mdi:human-handsdown #mdi:walk
styles:
# card:
# - width: 110px
name:
- font-size: 12px
label:
- font-size: 12px
- font-weight: bold
- color: var(--secondary-text-color)
- justify-self: start
tap_action:
action: none
hold_action:
action: none
dbltap_action:
action: more-info
Why not just declare a generic template for your generic settings and declare specific templates for windows or doors that inherit your generic template and set your actions?
Something like this:
generic_sensors:
name_template: >
var sensor_name = entity.attributes.friendly_name;
if (sensor_name.split(' ')[sensor_name.split(' ').length - 1] === 'Door') {
var sensor_name = sensor_name.replace(' Door', '');
return sensor_name;
} else {
var sensor_name = sensor_name.replace(' Window', '');
var sensor_name = sensor_name.replace('Left', '(L)');
var sensor_name = sensor_name.replace('Centre', '(C)');
var sensor_name = sensor_name.replace('Right', '(R)');
return sensor_name;
}
show_label: true
label_template: >
return entity.state === 'on' ? '-MOVEMENT-' : '' ## Maybe this has to be specific for motion only, if so move it in the motion one
layout: icon_label
aspect_ratio: 2.5/1
size: 50%
styles:
# card:
# - width: 110px
name:
- font-size: 12px
label:
- font-size: 12px
- font-weight: bold
- color: var(--secondary-text-color)
- justify-self: start
state:
- value: "on"
id: sensor_on
styles:
card:
- box-shadow: 0px 0px 8px 2px var(--secondary-text-color)
icon:
- color: var(--secondary-text-color)
tap_action:
action: none
hold_action:
action: none
window_sensors:
template: generic_sensors
dbltap_action:
action: more-info
state:
- id: sensor_on
icon: mdi:window-open
- value: "off"
icon: mdi:window-closed
door_sensors:
template: generic_sensors
dbltap_action:
action: more-info
state:
- id: sensor_on
icon: mdi:door-open
- value: "off"
icon: mdi:door-closed
motion_sensors:
template: generic_sensors
state:
- id: sensor_on
icon: mdi:run
- value: "off"
icon: mdi:human-handsdown
And then use the appropriate template in each type of sensor you want to display:
motion_sensorswindows_sensorsdoor_sensorsThe trick here is that you can inherit template from a template and overload/add anything.
Brilliant!
Thanks…
EDIT: That all worked perfectly, Thanks again. The more I use this card the better it gets!!
And in case anyone is interested in how it looks…
nice!
of course you need to show us the code that creates all of this now…
Oh, ok.
Just for you
Templates
#===========================================
#=== Motion, Door and Window Sensors Header
#===========================================
motion_door_and_window_sensors_header:
show_name: false
show_label: true
show_icon: false
layout: icon_label
label_template: >
var i;
var entities = entity.attributes.entity_id;
var count = 0;
var entity_type = entity.attributes.friendly_name.split(' ')[1];
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
if (entity_type === 'PIR') {
var label_prefix = '-- Motion';
var label_sufix = ' Detected --';
} else if (entity_type === 'Door') {
var label_prefix = '-- Doors';
var label_sufix = ' are Open --';
} else {
var label_prefix = '-- Windows';
var label_sufix = ' are Open --';
}
return label_prefix + (count.toString() > 0 ? label_sufix : ' --');
styles:
card:
- background-color: var(--paper-card-background-color) #"rgba(0, 0, 0, 0.0)"
label:
- justify-self: start
- padding-left: 24px
- font-size: 24px
- color: var(--primary-text-color)
grid:
- grid-template-areas: '"l"'
- grid-template-columns: 1fr
#================
# Motion sensors
#================
motion_sensors:
template: generic_motion_door_and_window_sensors
state:
- id: sensor_on
icon: mdi:run
- value: "off"
icon: mdi:human-handsdown
#==============
# Door sensors
#==============
door_sensors:
template: generic_motion_door_and_window_sensors
dbltap_action:
action: more-info
state:
- id: sensor_on
icon: mdi:door-open
- value: "off"
icon: mdi:door-closed
#================
# Window sensors
#================
window_sensors:
template: generic_motion_door_and_window_sensors
dbltap_action:
action: more-info
state:
- id: sensor_on
icon: mdi:window-open
- value: "off"
icon: mdi:window-closed
#============================================
#=== Generic Motion, Door and Window Sensors
#============================================
generic_motion_door_and_window_sensors:
name_template: >
var sensor_name = entity.attributes.friendly_name;
if (sensor_name.search('PIR') === 0) {
return sensor_name.split('PIR ')[1];
} else if (sensor_name.split(' ')[sensor_name.split(' ').length - 1] === 'Door') {
var sensor_name = sensor_name.replace(' Door', '');
return sensor_name;
} else {
var sensor_name = sensor_name.replace(' Window', '');
var sensor_name = sensor_name.replace('Left', '(L)');
var sensor_name = sensor_name.replace('Centre', '(C)');
var sensor_name = sensor_name.replace('Right', '(R)');
return sensor_name;
}
show_label: true
label_template: >
var sensor_name = entity.attributes.friendly_name;
if (sensor_name.search('PIR') === 0) {
return entity.state === 'on' ? '-MOTION-' : '';
} else {
return entity.state === 'on' ? '-OPEN-' : '';
}
layout: icon_label
aspect_ratio: 2.5/1
size: 50%
state:
- value: "on"
id: sensor_on
# icon: mdi:run
styles:
card:
- box-shadow: 0px 0px 8px 2px var(--secondary-text-color)
icon:
- color: var(--secondary-text-color)
# - value: "off"
# icon: mdi:human-handsdown #mdi:walk
styles:
# card:
# - width: 110px
name:
- font-size: 12px
label:
- font-size: 12px
- font-weight: bold
- color: var(--secondary-text-color)
- justify-self: start
tap_action:
action: none
hold_action:
action: none
dbltap_action:
action: more-info
Button Cards
#====================================
#=== Motion, Door And Window Sensors
#====================================
- type: vertical-stack
cards:
#===========
#=== Motion
#===========
- type: "custom:button-card"
entity: group.all_pir_sensors
template: motion_door_and_window_sensors_header
- type: horizontal-stack
cards:
# - type: "custom:button-card"
# color_type: blank-card
- type: "custom:button-card"
entity: binary_sensor.pir_hall
template: motion_sensors
- type: "custom:button-card"
entity: binary_sensor.pir_dining_room
template: motion_sensors
- type: "custom:button-card"
entity: binary_sensor.pir_kitchen
template: motion_sensors
- type: "custom:button-card"
color_type: blank-card
- type: horizontal-stack
cards:
# - type: "custom:button-card"
# color_type: blank-card
- type: "custom:button-card"
entity: binary_sensor.pir_sitting_room
template: motion_sensors
- type: "custom:button-card"
entity: binary_sensor.pir_pool_room
template: motion_sensors
- type: "custom:button-card"
entity: binary_sensor.pir_upstairs_hall
template: motion_sensors
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: blank-card
styles:
card:
- height: 1px
#==========
#=== Doors
#==========
- type: "custom:button-card"
entity: group.all_door_sensors
template: motion_door_and_window_sensors_header
- type: horizontal-stack
cards:
# - type: "custom:button-card"
# color_type: blank-card
- type: "custom:button-card"
entity: binary_sensor.front_door
template: door_sensors
state:
- value: "on"
icon: mdi:door-open
- value: "off"
icon: mdi:door-closed
- type: "custom:button-card"
entity: binary_sensor.back_door
template: door_sensors
state:
- value: "on"
icon: mdi:door-open
- value: "off"
icon: mdi:door-closed
- type: "custom:button-card"
entity: binary_sensor.side_door
template: door_sensors
state:
- value: "on"
icon: mdi:door-open
- value: "off"
icon: mdi:door-closed
- type: "custom:button-card"
color_type: blank-card
- type: horizontal-stack
cards:
# - type: "custom:button-card"
# color_type: blank-card
- type: "custom:button-card"
entity: binary_sensor.patio_door
template: door_sensors
state:
- value: "on"
icon: mdi:door-open
- value: "off"
icon: mdi:door-closed
- type: "custom:button-card"
entity: binary_sensor.shed_door
template: door_sensors
state:
- value: "on"
icon: mdi:door-open
- value: "off"
icon: mdi:door-closed
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: blank-card
styles:
card:
- height: 1px
#============
#=== Windows
#============
- type: "custom:button-card"
entity: group.all_window_sensors
template: motion_door_and_window_sensors_header
- type: horizontal-stack
cards:
- type: "custom:button-card"
entity: binary_sensor.pool_room_left_window
template: window_sensors
- type: "custom:button-card"
entity: binary_sensor.pool_room_centre_window
template: window_sensors
- type: "custom:button-card"
entity: binary_sensor.pool_room_right_window
template: window_sensors
- type: "custom:button-card"
entity: binary_sensor.kitchen_window
template: window_sensors
- type: horizontal-stack
cards:
- type: "custom:button-card"
entity: binary_sensor.dining_room_left_window
template: window_sensors
- type: "custom:button-card"
entity: binary_sensor.dining_room_right_window
template: window_sensors
- type: "custom:button-card"
entity: binary_sensor.shower_room_window
template: window_sensors
- type: "custom:button-card"
entity: binary_sensor.bathroom_window
template: window_sensors
- type: "custom:button-card"
color_type: blank-card
styles:
card:
- height: 20px