this is my config, and it working with Entities Card, but not working with button card:
sensor:
- platform: systemmonitor
resources:
- type: processor_use
- type: processor_temperature
- type: disk_use_percent
arg: /home
- type: memory_use_percent
- type: load_1m
- type: ipv4_address
arg: eth0
- type: last_boot
your config is ok, but as you can see the template renders âunknownâ, which explains the error in the button card.
I am baffled this is working in the entities card⌠should really be:
one more try: show the sensor.processor_use in the states overview please:
Hi all,
despite countless attempts, I canât get anywhere, although I hate to ask. I want an icon to rotate 45 degrees when the light is on. It does, but only if I leave out the button template. Until now, I assumed that with multiple templates, the last defined rules would prevail. But in my code, the states clash.
Without template button_light :
With template button_light :
And hereâs my code:
button_basis:
template: farbschema_dunkel
aspect_ratio: 1/1
color-type: icon
color: auto
styles:
card:
- border: none
- border-radius: 5px
- '--mdc-ripple-color': lightyellow
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 12px
- font-weight: 700
state:
- font-size: 10px
label:
- font-size: 10px
state:
- value: unavailable
styles:
card:
- color: '[[[ return variables.basis_unavailable_color ]]]'
- background-color: '[[[ return variables.basis_unavailable_bg ]]]'
icon:
- color: '[[[ return variables.basis_unavailable_icon ]]]'
.
.
button_licht:
template: button_basis
tap_action:
action: toggle
haptic: success
hold_action:
action: more-info
haptic: selection
show_last_changed: false
show_state: false
styles:
card:
- color: '[[[ return variables.licht_card_color ]]]'
- background-color: '[[[ return variables.licht_card_bg ]]]'
state:
- value: 'on'
styles:
card:
- -webkit-box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
- box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
- transition: all 2s ease
icon:
- filter: drop-shadow(0 0 0.75rem var(--button-card-light-color))
- transition: 2s ease
name:
- color: var(--button-card-light-color)
- operator: default
show_label: true
label: |
[[[
if (entity.state == 'on') return 'Helligkeit: ' + (Math.round(entity.attributes.brightness / 2.55)) + '%';
]]]
.
.
- type: 'custom:button-card'
template:
- button_licht
entity: light.hue_iris
icon: |
[[[
if (entity.state == 'on') return 'mdi:wall-sconce-round-variant'; return 'mdi:flower-outline';
]]]
state:
- value: 'on'
styles:
icon:
- transform: rotate(45deg)
Maybe someone will be so kind and take pity on me 
not really sure, but it might be that you have 2 state: in your setup: one in the template and one in the button itself. These donât merge, you should then set an id: to mergeâŚsee button-card/README.md at master ¡ custom-cards/button-card ¡ GitHub
the id: then injects whatever follows in the spot where you have it set in your template.
so you can use this in your button card config:
state:
- value: 'on'
id: state-on
styles:
label:
- color: var(--text-color-on)
- value: 'off'
id: state-off
styles:
label:
- color: var(--text-color-off)
additional to what you have in your template:
styles_state_default:
template: styles_state_default_auto
state:
- value: 'on'
styles:
icon:
- color: var(--icon-color-on)
id: state-on
FUUUUU⌠âŚnny! I swear I had read it at some point, but dismissed it. You saved my day! Thank you, sir!
I solved it in the same way like you suggested, putting a simple âid: glowâ at the end of the template state.
oh, sorry. I checked again, error because the name in config is different from the name while calling sersor. Thanks @Mariusthvdb
Anyone any know why Iâve a gap between Stuart and Work? And how to remove it?
entity: person.stuart
show_entity_picture: true
state:
- value: Work
styles:
name:
- color: green
- value: Away
styles:
name:
- color: '#EF4F1A'
styles:
card:
- border-radius: 0%
- font-size: 12px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: start
- font-family: avenir
grid:
- grid-template-areas: '"i n" "i location" "i battery" "i charging" "i wifi"'
- grid-template-columns: 1fr 50%
name:
- font-size: 16px
- align-self: start
- justify-self: start
icon:
- width: 50%
- border-radius: 50%
custom_fields:
location:
- padding-bottom: 0px
- align-self: start
- justify-self: start
- color: gray
battery:
- padding-bottom: 0px
- align-self: start
- justify-self: start
- color: gray
charging:
- padding-bottom: 0px
- align-self: start
- justify-self: start
- color: gray
wifi:
- padding-bottom: 0px
- align-self: start
- justify-self: start
- color: gray
custom_fields:
location: |
[[[
return `<ha-icon
icon="mdi:map-marker"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>${entity.state}</span>`
]]]
battery: |
[[[
return `<ha-icon
icon="mdi:cellphone-iphone"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_a6003_battery_level'].state}% battery</span></span>`
]]]
charging: |
[[[
return `<ha-icon
icon="mdi:power-plug"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.oneplus_a6003_battery_state'].state}</span></span>`
]]]
wifi: |
[[[
return `<ha-icon
icon="mdi:wifi"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_a6003_wifi_connection'].state}</span></span>`
]]]
Try
name:
- ...
- align-self: end
- ...
Hi there. This has been driving me crazy and Iâm hoping someone can help. I have a yaml file with custom configs that nest a picture card within a button card but for some reason, itâs rendering it as âcustom: pictureâ and throwing up an error âcustom element doesnât exist: picture.â
Hereâs the custom fields yaml:
color_lights:
variables:
entity: "var_entity"
title: "var_title"
gridarea: "var_gridarea"
aspect_ratio: 2/1
custom_fields:
color:
card:
type: picture
image: /local/ui/color.png
tap_action:
action: fire-dom-event
browser_mod:
command: popup
card:
cards:
- entities:
- entity: '[[[ return variables.entity ]]]'
secondary_info: last-changed
style:
z-index: 5
show_header_toggle: false
type: entities
- brightness: false
color_picker: true
consolidate_entities: true
color_temp: false
effects_list: false
entity: '[[[ return variables.entity ]]]'
header: false
hide_header: true
persist_features: true
smooth_color_wheel: true
type: 'custom:light-entity-card'
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
mode: vertical
type: 'custom:stack-in-card'
style: |
ha-card {
opacity: 0.9;
}
mwc-icon-button {
margin: 0 0 .35em 0;
}
title: '[[[ return variables.title ]]]'
card_mod:
style: |
ha-card {
box-shadow: none;
}
And here is where it is referenced:
type: picture-elements
image: /local/ui/floorplan/blurredFloorplan.png
view_layout:
grid-area: main
card_mod:
style: |
ha-card {
background: rgba(42, 46, 48, 1);
}
mod-card.element {
top: 50%;
left: 50%;
height: 100%;
width: 100%;
}
elements:
- type: 'custom:mod-card'
card:
type: 'custom:layout-card'
layout_type: custom:grid-layout
layout:
grid-template-columns: 5% 1fr 1fr 1fr 1fr 5%
grid-template-rows: 5% auto
grid-template-areas: |
". . . . . ."
". a b c d ."
". e f g h ."
". i j k l ."
". m n o p ."
". q r s t ."
". . . . . ."
cards:
- type: 'custom:button-card'
template: color_lights
variables:
entity: light.bedroom
title: Bedroom
gridarea: '"i . color" "n n n" "slider slider slider"'
entity: light.bedroom
icon: 'mdi:lightbulb'
view_layout:
grid-area: e
style:
left: 50%
top: 50%
width: 100%
height: 100%
card_mod:
style:
layout-card$:
grid-layout$: |
#root {
height: 100%;
}
.: |
ha-card {
height: 100%;
width: 100%;
}
As you can see, itâs not seeing picture as a regular HA card for some reason. This is what gets rendered:
The path to the color.png file is correct, and if I just used a picture card outside of the button card, it renders just fine.
Hi All,
I have some buttons and they work. But this one is not working. Can someone assist me?
type: 'custom:button-card'
template: buttons-default
entity: sensor.holiday
show_state: true
state:
- value: |
[[[
if (states['sensor.holiday'].state === 'Nothing')
return 'on';
else return 'off';
]]]
spin: true
color: 'rgba(3,157,252,1)'
styles:
state: |
[[[
if (states['sensor.holiday'].state === 'Nothing')
return 'on';
else return 'off';
]]]
card:
- box-shadow: '0px 0px 2px 2px rgba(3, 157, 252,1)'
- operator: default
spin: false
color: 'rgba(150,150,150,1)'
This one is working:
type: 'custom:button-card'
template: fan-settings
entity: fan.afzuiging_badkamer
name: Low
icon: 'hass:fan'
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.afzuiging_badkamer
preset_mode: low
state:
- value: |
[[[
if (states['fan.afzuiging_badkamer'].attributes.preset_mode === 'low')
return 'on';
else return 'off';
]]]
spin: true
color: 'rgba(3,157,252,1)'
styles:
state: 'on'
card:
- box-shadow: '0px 0px 2px 2px rgba(3, 157, 252,1)'
- operator: default
spin: false
color: 'rgba(150,150,150,1)'
icon: 'hass:fan'
Why does the state rule appear twice?
The first script have problems. Because sensor.holiday does not have âonâ or âoffâ but have ânothingâ is same as âoffâ. Other values are âKingsday, Birthday, Chrismass, Halloweenâ.
So first want let this work with âNothingâ if this work then it will be !== so everything is not âNothingâ then give value âonâ
I need this if state to give a âonâ or âoffâ state as return. Same for the second one⌠styles>state need a âonâ or âoffâ to work so the card > box-shadow will work also.
Anyone that know how to pass as variable to a configuration template the following:
tap_action: !include ../popup-cards/rooms/living-room.yaml
I want to reuse the same template and be able to pass a different tap_action configuration
Another question that I have is if triggers can be used with variables?
custom_fields:
ljud: |
[[[
return `<ha-icon
icon= var(--icon-mode)"
style="width: 16px; height: 20px; color: var(--icon-color);">
</ha-icon><span> <span style="color: var(--text-color-sensor);">
${states['sensor.sofia_p30_ringer_mode'].state}</span></span>`
]]]
is it possible to do something like : âreturn `<ha-icon icon= var(âicon-mode)â
like with icon color: âcolor: var(âicon-color)â ?
so my template changes icon by state
I have two different scripts to turn on and turn off my projector. And I want to manipulate it with one button. How to realize it?
Something like:
- type: 'custom:button-card'
entity: script.projector_on
entity: script.projector_off
icon: mdi:projector
color: rgb(255, 0, 0)
state:
- value: 'off'
color: rgb(0, 0, 0)
But it is not work.
(Next question, how to get the action run script on button push, not a script window).
You will need to create a third script (a toggle script) that runs the correct on or off script depending on some state (and make this state the main entity of the button). A button can only have one entity per action. Alternatively, run the one script on tap and the other on double tap (for example).
Thank you! Looks like it too hard for me 
I found this way without scripts and did it with my IR transmitter and speakers. May be there is any way to add two commands (or actions) on one tap here?
- type: 'custom:button-card'
color_type: card
color: rgb(255, 0, 0)
icon: mdi:power-standby
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.broadlink_remote
device: speakers
command: turn on
My problem is my projector that have different buttons on IR remote control to turn on and turn off. And I need to press turn off button twice, because it show confirmation dialog on first tap.
This card is not working. Others are working. Only difference is that the state is not ON or OFF but Nothing. How to solve this oneâŚ
type: 'custom:button-card'
template: buttons-test
entity: sensor.holiday
show_state: true
state:
- value: |
[[[
if (states['sensor.holiday'].state === 'Nothing')
return 'on';
else return 'off';
]]]
spin: true
color: 'rgba(3,157,252,1)'
styles:
card:
- box-shadow: '0px 0px 2px 2px rgba(3, 157, 252,1)'
- operator: default
spin: false
color: 'rgba(150,150,150,1)'
button_card_templates:
buttons-test:
show_icon: true
size: 15%
tap_action:
action: toggle
styles:
card:
- font-size: 14px
- height: 80px
What if you use different button actions? (hold_action, double_tap_action)
I made it with this code.
# configuration.yaml
switch:
- platform: template
switches:
projector_power:
# value_template: "{{ is_state('switch.projector_power', 'on') }}" # need to get state, but it not possible for me
turn_on:
- service: remote.send_command
data:
entity_id: remote.broadlink_remote
device: projector
command: turn on
turn_off:
- service: remote.send_command
data:
entity_id: remote.broadlink_remote
device: projector
command: turn off
- delay:
milliseconds: 600
- service: remote.send_command
data:
entity_id: remote.broadlink_remote
device: projector
command: turn off
# ui-lovelace.yaml
- type: 'custom:button-card'
entity: switch.projector_power
color_type: card
color: red
name: PROJECTOR
icon: mdi:projector
styles:
card:
- --mdc-ripple-color: red
- --mdc-ripple-press-opacity: 0.9