Is anyone allse having the problem that on ios Homeassistant app it generates a double tap insted of a tap when clicking the buttons?
Started a few days ago for me. and i changed nothing in my configs but it might be related to an updated of either this addon of the app itself. Trying to narrow it down. On my computer it all works fine. But on my 2 phones it generates double tap. (when tapping once)
Make sure you are running the latest version (3.1.1). You can see the version in the javascript console. Had some issues with HACS lately. Also clear the cache your phones 
Please report back after, with the phone model if it doesnāt work
Yeh i have 3.1.1 installed and Cashe cleared. Using Iphone 10Xs and Iphone 7
After Clearing like 6 times it eventualy started working. allso reinstalled 3.1.1
very nice dave, thanks for that
Hi everybody,
Iād like my button-card icon becoming green when an attribute of my entity matches the states it commands ā¦
When i ātapā on Vit. 5, my Daikin A/C fan_mode goes to 5, and my button becomes green
With my code, button is everytime green ā¦ 
type: 'custom:button-card'
entity: climate.clim_salon
name: Vit. 5
icon: 'mdi:fan'
tap_action:
action: call-service
service: climate.set_fan_mode
service_data:
entity_id: climate.clim_salon
fan_mode: '5'
state:
- operator: template
value: states.climate.clim_salon.attributes.fan_mode == '5'
styles:
icon:
- color: green
- operator: default
styles:
icon:
- color: red
In the template simulator, expression :
states.climate.clim_salon.attributes.fan_mode == '5'
is True
Any idea ? Thanks ā¦
Templates require [[[ ]]] around them (and quotes also if itās on one line)
value: "[[[ return states['climate.clim_salon'].attributes.fan_mode == '5' ]]]"
PS: this is javascript, you canāt use the template simulator from home-assistant
I have two buttons like these:
How to merge the second one (with power consume) into the first?
This is the template i use for the first button:
button_body_alt:
color: auto
size: 30%
aspect_ratio: 1/1
icon: mdi:power-socket-eu
show_state: true
show_label: true
tap_action:
action: more-info
styles:
lock:
- color: red
card:
- border-radius: 6px
- padding-left: 5px
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
name:
- justify-self: start
- font-weight: normal
- font-family: Helvetica
- font-size: 13px
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
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: normal
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
state:
- value: 'on'
styles:
card:
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
- box-shadow: 0px 0px 2px 1px rgb(85, 91, 101)
- box-shadow: 0px 0px 2px 1px var(--paper-item-icon-active-color)
- background-color: '#F0C209'
name:
- color: '#555B65'
state:
- color: gray
label:
- color: red
icon:
- color: '#555B65'
id: on-icon
- value: 'off'
styles:
card:
- color: '#F0C209'
- background-color: '#555B65'
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: '#F0C209'
id: off-icon
- value: 'unavailable'
styles:
card:
- opacity: 0.6
- color: grey
- --paper-item-icon-color: grey
label:
- color: rgba(0, 0, 0, 0.0)
@RomRider Thanks for your tip, but it doesnāt work ā¦
Quotes are rescripted when i save the button config, is it normal ? i have used yours ā¦
Now button is everytime Red
type: 'custom:button-card'
entity: climate.clim_salon
name: Silence
icon: 'mdi:fan'
tap_action:
action: call-service
service: climate.set_fan_mode
service_data:
entity_id: climate.clim_salon
fan_mode: Silence
state:
- operator: template
value: '[[[ states[''climate.clim_salon''].attributes.fan_mode == ''Silence'' ]]]'
styles:
icon:
- color: green
- operator: default
styles:
icon:
- color: red
Is it possible to show the icons if a device_class is defined?
Blank button with no customizing only shows a hook:
But the entity is defined with device_class: door
Thereās a report open for that on github. Iāll have a look, I donāt know how itās done in core but itās surprising that this is done on the front-end. Thoughts @iantrich?
having used my button_card_template for lights for such a long time, I seem to have completely forgotten how to use the gridā¦
hoped this was a quick fix, but apparently not:
using:
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
I get this for my lights:
and having seen the HomeKit card by @DBuit , Id like to change that so that the percentage (label) shows to the right of the state on the same line.
- grid-template-areas: '"i" "n" "s" "l"'
to
- grid-template-areas: '"i" "n" "s l"'
doesnt do anything unfortunately.
checking the available layout options nothing comes close to
icon
name
state: label
so I could āoverloadā that?
Would anyone of you see the quick fix? thanks for having a look!
For your information, this script works for me :
state:
- operator: template
value: >-
[[[ if (entity.attributes.fan_mode == 'Silence') return true; else return
false ]]]
styles:
icon:
- color: green
- operator: default
styles:
icon:
- color: red
Thanks 
Iām certainly not an expert with grids, but I think you need:
- grid-template-areas: '"i i" "n n" "s l"'
So that the icon cell spans two columns, the name cell spans two columns, and then the state and label are in separate cells in the last row.
Canāt hurt to try at least
yes, thank you, thatās progress:
now need to shift that more to the left.
this is the full styles section now (already added the text-align: start for the label, the rest is how is was), any ideas how tho shift the label to the left? :
styles:
card:
- background-color: 'var(--paper-card-background-color)'
- padding-left: 5px
name:
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-align: start
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i i" "n n" "s l"' #'"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
pushing it to the right with padding seems to work, but I am not sure this the proper way to do so
- padding-right: 45px
Going by memory here as currently at work, but I think I do justify-self:end on the label to force it to the far right of the grid cell, and set some padding on the right, in the card style to push it back towards the left a little.
ok, I will check the options again thanks for your feedback!
because I FRād stateDisplay on the button, Romrider directed me to the custom_fields possibility we already have. Still hoping a state Display will become available in the future, this does it for now, though I havenāt fine-tuned it completely, and is a bit of a hassle I must admit:
state:
- value: 'on'
custom_fields:
state_label: >
[[[ return entity.state + ': ' + Math.round(entity.attributes.brightness / 2.55) + '%']]]
styles:
card:
- color: '#F0C209'
name:
- color: black
label:
- color: '#F0C209'
custom_fields:
state_label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
id: on-icon
- value: 'off'
custom_fields:
state_label: >
[[[ return entity.state ]]]
styles:
# card:
# - opacity: 0.7
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: grey
name:
- color: grey
state:
- color: grey
custom_fields:
state_label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- color: grey
id: off-icon
the result is what counts:
it does have the advantage of the state_label remaining formatted like this, no matter the resizing of the button. The other setup looks good in 1 size, but resizing makes it look odd, I admitā¦
disadvantage is coloring the state and label independently takes a full Css/html course to achieveā¦;-(
next up:
still, nothing is impossible:
state_label: >
[[[ var fakestate = `<span style="color: #F0C209;"> ${entity.state}:</span>`;
var fakelabel = `<span style="color: grey;"> ${Math.round(entity.attributes.brightness / 2.55)}%</span>`;
return fakestate + ' ' + fakelabel;]]]
or:
state:
- value: 'on'
custom_fields:
state_label: >
[[[ var fakestate = `<span style="color: #F0C209;"> ${entity.state}</span>`;
var fakelabel = `<span style="color: green;"> ${Math.round(entity.attributes.brightness / 2.55)}</span>`;
return fakestate + ': ' + fakelabel + ' %';]]]
styles:
card:
- color: black
custom_fields:
state_label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
id: on-icon
anyways, thanks for chiming in!
so I finally got around to adding the slider to my light template:
styles:
...
...
custom_fields:
slider:
- filter: opacity(80%)
- color: rgb(240, 194, 9)
- padding: 0px
custom_fields:
slider:
card:
type: custom:slider-entity-row
full_row: true
hide_state: true
entity: >
[[[ return entity.entity_id ]]]
but the than the filter: opacity(80%) none of the other styling options stick. I want another color and none of the available colors change, rgb, name, hex, quoted and unquoted, you name it. Also Id like the slider to fill the button, so I tried the padding: 0px, but the result stays like this:
please @RomRider could you point me to the solution for styling the slider?
thanks!
a ok, I will try that, thanks. didnāt think of that because this is in my button_card_templates, can we style these templates also?
if I need card-mod ho come the opacity filter does work then? Are any other settings available native the styles field for the custom_field or is that dependent on the custom card we use. Trying to better understand what weāre doing here