Has something changed with transition effect? Since a few updates ago (I think 2021.12) this doesn’t work anymore. I haven’t changed anything in my code or setup but the transition suddenly is gone. I used this: transition: all 0.5s ease when a entity changed between states, which applied filter: grayscale(100%) blur(17px) in a transition.
Any ideas?
hi!
using this (your) template to extract the icon_color attribute
styles:
icon:
- color: |
[[[ if (entity && entity.attributes && entity.attributes.templates) {
const tpl = entity.attributes.templates;
if (tpl.icon_color) {
return new Function('state', `'use strict'; ${tpl.icon_color}`).call(this, entity.state);
}
}
return null; ]]]
set on entities with custom-ui successfully all over. Until now… Id like to set it on a custom_field notification border:
support_custom_ui_notification_border:
styles:
custom_fields:
notification:
- border-color: |
[[[ if (entity && entity.attributes && entity.attributes.templates) {
const tpl = entity.attributes.templates;
if (tpl.icon_color) {
return new Function('state', `'use strict'; ${tpl.icon_color}`).call(this, entity.state);
}
}
return null; ]]]
but it does exactly nothing. If I set it on color:, it works fine,
or background:
and most other fields I tested.
Is there a reason I can not set it on border-color? Ofc I tried a fixed color in the button-card template, to see if it is placed correctly, and that too works just as expected.
type: custom:button-card
aspect_ratio: 1/1
template:
- support_custom_ui # color the icon
- support_custom_ui_notification_border #color border
- styles_name_left
- styles_card
- styles_cf_notification
- styles_img_cell
- plot
custom_fields:
notification: >
[[[ return entity.state + 'W'; ]]]
there’s no conflict in the other templates.
please help me out? thanks
update
fix it. turns out if one doesnt add border-style nothing shows… and as I replaced shorthand border: 2px solid red to use the template, and thus individual keys for the border properties, I had lost that…
This is how I can call a WLED preset using Developer Services
service: select.select_option
target:
entity_id: select.wled_brew_preset
data:
option: Preset 4
I’m having trouble converting that into Button card format. I’ve tried a bunch alternatives including the one below. What am I missing?
tap_action:
action: call-service
service: select.select_option
service_data:
target:
entity_id: select.wled_brew_preset
data:
option: Preset 4
data is the service_data section, you put target and data in the service_data section. Remove your target line and your data line and keep the rest.
Thanks for the quick response. The differences in service_data between automations and lovelace trips me up more than anything else.
Hello all,
Based on an integration of our local bus company (De Lijn), I have created the following button card that conditionaly displays when the next bus is expected with more than 5 minutes delay:
Here is the code for the ones who are interested. Just know that, to get there, I had to create some templates to convert the integration data (which is bus-stop centered) into these “next bus-centered” sensors.
type: custom:button-card
icon: mdi:bus-stop
entity_picture: |
[[[
return `${states['sensor.template_1st_next_bus_34_tramstraat'].attributes.entity_picture}`
]]]
show_icon: false
show_entity_picture: true
show_state: true
custom_fields:
ligne: Bus 34, Tramstraat
retard: |
[[[
return `${states['sensor.template_1st_next_bus_34_tramstraat'].attributes.delay} minutes de retard`
]]]
horaire: |
[[[
return `Horaire : ${states['sensor.template_1st_next_bus_34_tramstraat'].attributes.scheduled}`
]]]
prevu: |
[[[
return `Prévu : ${states['sensor.template_1st_next_bus_34_tramstraat'].attributes.expected}`
]]]
suivant: |
[[[
return `Suivant à ${states['sensor.template_2nd_next_bus_34_tramstraat'].attributes.expected}`
]]]
alternative: |
[[[
return `Bus 27 à ${states['sensor.template_1st_next_bus_27_sinte_barbarastraat'].attributes.expected}`
]]]
styles:
card:
- border-radius: 5px
- padding: 7px 10px 7px 0px
- height: 100px
- font-size: 16px
- color: '#000099'
- text-shadow: 2px 0px 2px ivory
- background-color: '#FFDD00'
grid:
- grid-template-areas: >-
"i ligne retard" "i horaire ." "i prevu ." "i prevu ." "i suivant
alternative"
- grid-template-columns: 25% 1fr min-content
- grid-template-rows: min-content min-content 1fr min-content min-content
custom_fields:
ligne:
- align-self: start
- justify-self: start
- font-size: 14px
retard:
- align-self: start
- justify-self: end
- font-weight: bold
- color: red
horaire:
- align-self: center
- justify-self: start
prevu:
- align-self: center
- justify-self: start
- font-size: 20px
suivant:
- align-self: end
- justify-self: start
- font-size: 14px
alternative:
- align-self: end
- justify-self: start
- font-size: 14px
I am not unhappy with the result, but would like to find a way to make the entity_picture bigger within its allocated space: I have the feeling there is too much padding I cannot remove.
Any suggestion?
You haven’t defined a style rule for entity_picture. Something like
styles:
entity_picture:
- transform: scale(1.8)
I knew there must have been a way, but I didn’t know about the transform function.
Thanks a lot!
I have a problem. I am converting the look from “normal” to one with a button-card. And I have this button code that works:
type: button
tap_action:
action: call-service
service: input_number.increment
service_data: {}
target:
entity_id: input_number.temperatura_duzy
entity: input_number.temperatura_duzy
icon: mdi:thermometer-plus
show_name: false
And a version that does not work with button-card:
type: custom:button-card
tap_action:
action: call-service
service: input_number.increment
service_data: {}
target:
entity_id: input_number.temperatura_duzy
icon: mdi:thermometer-plus
aspect_ratio: 1/1
styles:
card:
- border-radius: 10%
And I have no idea why.
This is not the correct code for actions on front-end according to the docs at least. Some updates ago HA updated the backend service calls and added target (for automations and scripts) but somehow the front-end still operates as before. So it can be confusing if you’re new and haven’t used it the old fashion way. The normal button-card should also use the old way however (so strange it works) My guess is custom button card only works the old way (all my cards use the old way).
According to the docs all front-end actions are still the same way as before (and not the same as automations from backend) : Actions - Home Assistant
Remove target and it should work. Follow the example, so it should be:
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.temperatura_duzyI’m trying to implement button_card_templates in lovelace Custom Stategies but I can’t use them and my page return the error “Button-card template ‘rooms_subheader’ is missing !”
I tried to include them from YAML and UI but it’s the same result…
button_card_templates:
!include_dir_merge_named button-cards-templates
strategy:
type: custom:my-demo
views: []
Is there any way to make it works ?
been replacing my js templates ‘==’ with the ‘===’ because of alleged advantage of no type conversion happening, see Which equals operator (== vs ===) should be used in JavaScript comparisons? - Stack Overflow (evil twins…) and Strict equality (===) - JavaScript | MDN
didnt notice any negative impact up to now…
having these variables:
variables:
view: >
[[[ return window.location.pathname.split('/').slice(-1) === 'home'; ]]]
for my buttons, and deciding action based on that:
hold_action:
action: >
[[[ return variables.view ? 'navigate' : 'call-service'; ]]]
navigation_path: >
[[[ return variables.view ? '/ui-develop/develop' : null; ]]]
service: >
[[[ return variables.view ? null : 'automation.trigger'; ]]]
service_data:
entity_id: >
[[[ return variables.view ? null : entity.entity_id; ]]]
has always worked with the ‘==’ comparison and now stopped. even though
why would this need a type conversion using ‘==’ ?
using another:
[[[ return (window.location.pathname.split('/')[2] === 'presence')
? null : '/ui-data/presence'; ]]]
does work however. the technique of string manipulation seems to make a difference, I dont understand yet, and if anyone could educate me here, I would certainly appreciate that.
Does anyone work with input_select nside a custom field and has noticed that the menu only folds out when you hold your finger on it?
In case you hadn’t seen it, there’s this custom card: Select list Card . And in case you hadn’t managed to solve your use-case yet, I believe (about to try adding dropdowns myself tonight/tomorrow) , add a custom field, then set that custom field up as a card… boom. 
It works or you spend hours trying to get it to work. 
I totally forgot about this card, this was what I was looking for since I started work on revamping my dashboard. Many thanks!
thanks for that link, it made me find: GitHub - mattieha/slider-button-card: A button card with integrated slider which being in this custom:button-card thread for a long time is amazing I hadn’t found before
thought id give it some extra attention, because it seems to do nice things for many domains we try to buttonize here too.
This looks like it could be a nice way to have my current AdGuard pause functionality in a button card, I was not aware of this nesting.
But somehow it does not work.
Currently I use an input boolean (as a switch in lovelace) and a timer to pause AdGuard for 30 minutes, and reactivate once the timer has reached zero:
alias: Man - AdGuard 30 min. pausieren
description: ''
trigger:
- platform: state
entity_id: input_boolean.adguard_pause
to: 'on'
condition: []
action:
- type: turn_off
device_id: 24b9239338d7b9c5ec8b297c1e474f96
entity_id: switch.adguard_protection
domain: switch
- service: timer.start
target:
entity_id: timer.timer_30_min
data:
duration: '0'
- wait_for_trigger:
- platform: state
entity_id: timer.timer_30_min
to: idle
- type: turn_on
device_id: 24b9239338d7b9c5ec8b297c1e474f96
entity_id: switch.adguard_protection
domain: switch
- service: input_boolean.turn_off
target:
entity_id: input_boolean.adguard_pause
mode: restart
This works perfectly fine:
But if possible I would of course put that in a single fance button card 
So with your example of the timer inside the button card, I tried to start as simple as possible with my input boolean and the timer:
type: custom:button-card
entity: input_boolean.adguard_pause
aspect_ratio: 3/1
show_state: true
state_display: '[[[ return entity.state; ]]]'
custom_fields:
notification:
type: custom:button-card
entity: timer.timer_30_min
show_state: true
But somehow the timer thing does not work, while the button changes the input boolean as intended and the timer actually starts, the card stays with that object placeholder:
Where is the mistake?
this doesnt happen often, but for the life of me I cant understand why a button shows an icon that isnt explicitly set, or is inherited from the domain or entity itself for that matter:
- type: custom:button-card
template: button_boolean
tooltip: Toggle Notify
entity: input_boolean.notify_alarm
shows as
while I would have expected it to follow the boolean defaults mdi:check-circle-outline or mdi:close-circle-outline.
what could be behind this…
fixed it by using:
icon: >
[[[ return entity.state === 'on' ? 'mdi:check-circle-outline' : 'mdi:close-circle-outline'; ]]]
same happening on a switch, nb with device_class switch. showing the flash icon while the frontend should be showing toggle/off
@romrider, sorry for this silly question, but doesnt button card follow backend icon settings by default? Or has is just not adjusted to the new frontend pr that were merged lately
I’m trying to get the name and state of an entity horizontally aligned within this button. Unfortunately, layout: name_state doesn’t do what I want, since it just crams the two together:
type: custom:button-card
entity: sensor.total_interior_lights_on
show_state: true
show_name: true
show_icon: false
name: Inside Lights On
color_type: label-card
styles:
grid:
- grid-template-areas: '"n" "s"'
card:
- height: 85px
- background-color: rgba(7, 103, 215, 0.24)
- padding: 2%
- box-shadow: none
name:
- color: white
- font-size: 20px
- justify-self: left
- padding-left: 10px
state:
- color: white
- font-size: 30px
- justify-self: right
- padding-right: 10px
Yields this:
Padding either element, top or bottom, just moves both elements. Any ideas?
means vertical aligned items.
grid-template-areas: '"n s"'
arranges the elements side bei side.