I want to use the button card as an icon, without the surrounding border, the transparent background of the theme, how to configure the card? many thanks.
Perfect! Thank you!
Hey @kuuji,
I know this kind of defies the point, but is it possible to nest a horizontal stack inside of a regular card below typical entities etc?
thank you 
Linton
Or use the ‘hui’ trick.
- type: entities
entities:
- type: custom:hui-horizontal-stack-card
cards:
- ...
3 Likes
using this template on my buttons works fine, except for a state with more than 2 underscores (or capitals, I don’t know for sure)
entity_picture_template: >
return '/local/tiles/family/name_' + entity.state.toLowerCase().replace(' ','_') + '.png';
please see here for a separate post, didn’t want to obscure it too much.
js is correct ? (works everywhere in Tiles, and the rest of the Buttons), could it be the Button template interpreter?
thanks for having a look!
Fantastic! Thank you very much, can’t wait to try it
Unfortunately, no, your JS is not correct.
The replace function is taking a regexp, so the correct format for that to work is:
entity_picture_template: >
return '/local/tiles/family/name_' + entity.state.toLowerCase().replace(/ /g, '_') + '.png';
note the g, which means apply it as many time as possible, without it, it’s only done once which is the result you have with your current code.
> "Zwembad de Stok".replace(' ', '_')
'Zwembad_de Stok'
> "Zwembad de Stok".replace(/ /g, '_')
'Zwembad_de_Stok'
See here for more info: How to replace all occurrences of a string in JavaScript
wow, thanks for your speed! ill change right away.
does this work for the toLowerCase also? it should endup like (name_)zwembad_de_stok
Still, it does work on the Tiles card, so maybe that has this built in?
toLowerCase() is applied to the whole string.
> "Zwembad de Stok".toLowerCase().replace(' ', '_')
'zwembad_de stok'
> "Zwembad de Stok".toLowerCase().replace(/ /g, '_')
'zwembad_de_stok'
I don’t see how it can work. Other tiles are also using javascript, the same way this card is doing it. It’s your browser interpreting javascript so it’s the same interpreter whatever the tile is.
please let me ask where do you test this? Is an online javascript of your preference tester available
thanks again.
o yes, I’ve never known that.
Just imagine how many restarts this would have saved me, I can’t imagine… Once again you’re a life saver! can’t thanks you enough for this…
btw, the button works now 
1 Like
Hi everyone, I have been absent on this thread for a while as I was busy creating templates with the decluttering card.
I remember creating my first Homekit button design a while back just when @RomRider took over this repo, and it has only gotten better.
For the ones interested, I use two templates for ALL my buttons in my setup. The reason I use two is because I can’t seem to figure out how to template
label: ' '
and
label_template: >
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
in a single template with the decluttering card.
But still only 2 templates for over 60 different buttons is awesome! Thnx @RomRider
Here is the code for my shorted down template:
switch_button_card:
default:
- size: 25%
- lock: false
- color: auto
- background_color: var(--homekit-white)
- variable: spin
- spin: false
- show_name: true
- show_state: true
- show_label: true
- show_icon: true
- show_last_changed: false
- tap_action:
action: toggle
haptic: light
- hold_action:
action: more-info
haptic: success
- aspect_ratio: 1/1
- margin-right: 60px
- label: ' '
- opacity: 0.4
- off_icon_color: gray
- off_name_color: gray
- off_state_color: gray
card:
type: custom:button-card
name: '[[name]]'
icon: 'mdi:[[icon]]'
size: '[[size]]'
color: '[[color]]'
lock: '[[lock]]'
aspect_ratio: '[[aspect_ratio]]'
entity: '[[entity]]'
label: '[[label]]'
show_name: '[[show_name]]'
show_icon: '[[show_icon]]'
show_state: '[[show_state]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
tap_action: '[[tap_action]]'
hold_action: '[[hold_action]]'
styles:
card:
- border-radius: 12px
- --paper-card-background-color: '[[background_color]]'
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
- color: gray
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
- margin-right: '[[margin-right]]'
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
state:
- value: "on"
'[[variable]]': '[[spin]]'
styles:
name:
- color: black
state:
- color: gray
lock:
- color: black
- value: "off"
styles:
card:
- opacity: '[[opacity]]'
icon:
- color: '[[off_icon_color]]'
name:
- color: '[[off_name_color]]'
state:
- color: '[[off_state_color]]'
lock:
- color: black
For my full setup you can check here https://github.com/jimz011/homeassistant
@iantrich I think you might be interested in this
2 Likes
So I’d like to change the ‘lock’ duration from 5 seconds to 1 or 2 seconds. I tried this but it doesn’t work:
- type: custom:button-card
entity: input_boolean.alarmgaragedoor
icon: mdi:security
color_type: icon
lock: true
styles:
lock:
- -webkit-animation-duration: 1s
- animation-duration: 1s
- -webkit-animation-fill-mode: both
- animation-fill-mode: both
- margin: unset
state:
- value: 'off'
color: var(--paper-item-icon-color) # rgb(54, 95, 140)
- value: 'on'
color: var(--secondary-text-color) # rgb(251, 210, 41)
name: Exit-Enter
show_state: false
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.alarmgaragedoor
I just copied in the default style for lock and put it in what looked like the correct format but did I screw up?
Unfortunately that will not work, the lock is handled in javascript and the 5 seconds are hard-coded, it’s not an animation, it’s 2 animations + a delay between both.
If you’re interested in the code: https://github.com/custom-cards/button-card/blob/9ef93a2a350176d9d1e86adee9d86908ff13a270/src/button-card.ts#L776-L793
Well that’s a pity…
I just logged a Feature Request for this.
once again you were right. I forgot I have double setups for Lovelace and legacy. I meant to say the legacy tiles works correct. It uses this:
- entity: device_tracker.life360_name
style_template: >
if (state === 'home' || state === 'not_home') return 'background-image: url(\"/local/tiles/family/name_' + state + '.png\")';
return 'background-color: #643aac;background-image: url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
more_info: group.name
and this jinja template sensor for state, since I couldn’t get my head around creating 1 template for all, had to make a dedicated image template for the non home/not_home states (zones):
value_template: >
{% set state = states('device_tracker.life360_name') %}
{{ state|replace(' ','_')| lower }}
so jinja does it for all occurrences… no javascript