ok, no problem then 
[[[var abruzzo = states['binary_sensor.allarme_meteo_abruzzo'].state;
var lazio = states['binary_sensor.allarme_meteo_lazio'].state;
if (abruzzo == 'on' || lazio == 'on') return 'red';
return 'green';
]]]
1 Like
Thansk! You are my GURU !!! 
Iām trying to use a template but keep getting this error;
extra keys not allowed @ data[ābutton_card_templatesā]
My button card template yaml looks like this
light_button:
hold_action:
action: more-info
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === āonā) return (bri ? (bri+"%") : āā) ]]]
layout: icon_label
show_label: true
show_name: true
state:
- styles:
card:
- box-shadow: ā0px 0px 10px 3px #F9C536ā
icon:
Any help please?
I am trying to create a button that looks like markdown, i.e. horizontal with icon, state and label all concatenated and centralized. Something like this:
- type: markdown
content: >
<center>{% if is_state('sensor.server_ups_status', 'Online') %}
<ha-icon icon="mdi:car-battery"></ha-icon> {% else %} <ha-icon icon="mdi:alert-outline"></ha-icon> {% endif %}
{{states('sensor.server_ups_battery_runtime_min')}} min</center>
So, as a CSS newbie I tried to follow the instructions, some ideas from previous posts and came out with something like this:
- type: custom:button-card
entity: sensor.server_ups_status
aspect_ratio: 5.5/1
show_name: false
show_state: false
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: '"status"'
custom_fields:
status:
- align-self: center
- justify-self: center
- --animation: [[[ if (sensor.server_ups_status != 'Online') return 'blink 2s ease infinite'; ]]]
custom_fields:
status: >
[[[
return '<ha-icon
icon=[[[ if (sensor.server_ups_status == 'Online') return "mdi:car-battery"; return "mdi:alert-outline"; ]]]
style=[[[ if (sensor.server_ups_status != 'Online') return "color: red;"; ]]]></ha-icon>
<span style="color: var(--text-color-sensor);">${states['sensor.server_ups_battery_runtime_min'].state}<span> min</span></span>'
]]]
However, nothing is showing up on my view.
I tried deleting everything and using something simple like:
custom_fields:
status: >
[[[
return '<ha-icon icon="mdi:car-battery"></ha-icon>'
]]]
but no luck and nothing shows up.
Any tips?
Hi,
great work and my first Button card looks fine and is working.
Iām only missing one think: How could I display a card title if I stack some buttons on a card. I like to have a title like the standard cards but vertical-stack have no title.
Thank you, Steffen
Use the markdown card
your templates are incorrect.
should be in the form of:
if (states['sensor.server_ups_status'].state != 'Online') return etc etc etc
or, since you use an entity non the button config, simply reference that:
if (entities.state != 'Online') return etc etc etc
be ware of the false double semi-colon in the line:
return "color: red;"; ]
make that:
return "color: red"; ]
I cannot have this button card working:
- type: custom:button-card
entity: input_select_tado_mode
icon: mdi:thermostat
show_state: true
name: Termostato
styles:
card:
- font-weight: bold
- font-size: 13px
- font-family: 'Times New Roman'
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.tado_mode
state:
- value: "heat"
color: var(--disabled-text-color)
icon: mdi:thermostat
- value: "auto"
color: rgb(5, 147, 255)
- value: "off"
color: rgb(189, 255, 5)
This is the error:
āFallita chiamata a servizio input_select.select_option. required key not provided @data [āoptionā]ā
Iād like to have open the selection i made into the input_select entity and then choose what i want between them.
Where is the error?
Thank you, is working!
that is your error 
Ok i know this, but how tyo solve the error? I followed the docs about the cardā¦
you have to declare an āoptionā field:
- type: custom:button-card
template: button_picture_script_small
name: Arctic
entity_picture: '/local/hue_scenes/arctic.png'
tap_action:
action: call-service
service: script.tiles_set_hue_scene
service_data:
option: 'Arctische dageraad'
or use a template
option: >
[[[ states['input_select.tado_mode'].state ]]]
Ok, but maybe i cannot have in this way what i wantā¦
Iād like to have the choice to choose one of the three option inside the input_select entity which are: āoffā, āautoā and āheatāā¦
Maybe i must think somewhat different for this cardā¦
this is exactly what that template allows you to do. If those are the options of the input_select, the template will set these upon tap.
Or, you could write a few scripts, as I have done in the example, and in the script use the service input_selet.set_option. Then call these script on the button. Works perfectly fine.
Ok, but noticed that if i use that template i get the same error as beforeā¦
Canāt help you if you are not more specific: please post your code, and the error you see
The code is this:
- type: custom:button-card
entity: input_select_tado_mode
icon: mdi:thermostat
show_state: true
name: Termostato
styles:
card:
- font-weight: bold
- font-size: 13px
- font-family: 'Times New Roman'
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: >
[[[ states['input_select.tado_mode'].state ]]]
state:
- value: "heat"
color: var(--disabled-text-color)
icon: mdi:thermostat
- value: "auto"
color: rgb(5, 147, 255)
- value: "off"
color: rgb(189, 255, 5)
And the error is the same as i already posted here.
ok, now the question remains: what are you trying to do?
Do you need a button to set 3 different modes and set the input_select according to these buttons?
Or, do you want the buttons to show the state of the input_selectās state.
I want a button to set one of the 3 different modes and accordingly set the input_select .
that would be:
3 buttons, each with their own option.
Try:
- type: custom:button-card
icon: mdi:thermostat
name: 'Off'
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.tado_mode
option: 'Off'
etcetc
as said, you can also set the whole service part in a separate script, and call that script in the button.
personally I would use an entity_picture instead, and use label in stead of name. That could look like:
using this per button:
- type: custom:decluttering-card
template: set_hue_scene
variables:
- option: 'Arctische dageraad'
- entity_picture: '/local/hue_scenes/arctic.png'
- name: Arctic
- color: '#00d0a0'
and the decluttering template:
card:
type: custom:button-card
template: button_picture_script_small
entity_picture: '[[entity_picture]]'
name: '[[name]]'
tap_action:
action: call-service
service: script.tiles_set_hue_scene
service_data:
option: '[[option]]'
state:
- operator: template
value: >
[[[
return states['input_select.hue_scenes'].state == '[[option]]'
]]]
color: '[[color]]'
styles:
name:
- color: '#555B65'
and script:
script:
tiles_set_hue_scene:
alias: 'Tiles set Hue scene'
sequence:
service: input_select.select_option
entity_id: input_select.hue_scenes
data_template:
option: >
{{ option }}
but start simple at first