My lights can be controlled but there is no way to know if the light is on or off. That is the reason that I want to have a button with two type areas: one for on and one for off (in the same button).
Is it possible to achieve that with the button card? can I somehow define two tap areas on the button?
Thx
Yes, using custom_fields you can embed 2 other button cards inside the button-card, one for on and one for off 
I have succeeded to create some initial demo of such button. Thx. I’ve got strange issue. If I call the light.turn_on service directly, the light turn on and off. If I create script for turn on / off, the card work as expected. Any idea why (below is the working version)?
- type: custom:button-card
name: "Light"
aspect_ratio: 1/1
custom_fields:
'on':
card:
type: custom:button-card
name: 'ON'
icon: mdi:lightbulb-outline
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: call-service
service: script.light_turn_on
service_data:
entity_id: light_008
'off':
card:
type: custom:button-card
name: 'OFF'
icon: mdi:lightbulb-off-outline
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: call-service
service: script.light_turn_off
service_data:
entity_id: light_008
styles:
custom_fields:
'on':
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"n n" "on off"'
- grid-template-columns: 50% 50%
- grid-template-rows: 50% 50%
If it double clicks you’re probably not using the latest version of the card. What is the javascript console saying?
Hi there!
since the 0.107 version , when i click on a button with toggle action, instead of activate action it’s opening the more information tab.
Any idea ?
action: toggle
color: orange
color_type: card
custom_fields:
notification: |
[[[ return states['switch.nonaffecte'].state ]]]
entity: script.chauffage_lit
icon: 'mdi:hotel'
name: Chauffage lit
size: 30%
styles:
card:
- font-size: 18px
- font-weight: bold
custom_fields:
notification:
- background-color: |
[[[
if (states['switch.nonaffecte'].state == 'off')
return "green";
return "red";
]]]
- border-radius: 20%
- position: absolute
- left: 70%
- top: 5%
- height: 25px
- width: 30px
- font-size: 12px
- line-height: 20px
grid:
- position: relative
type: 'custom:button-card'
There are so many awesome examples that people have created with this card that I feel the card templates and a screenshot of each should be put on the Github repo so others can easily copy / take inspiration from them without sifting through over 3000 posts… I know this is a big ask but if each template author submitting their code if woudn’t be too hard… please?
I wss thinking about this lately, let me put something in place.
He meant Chrome browser (via … More Tools → Developer Tools, click on Console tab)
EDIT: Seems to be a browser issue, works on my android phone but not firefox.
Ive made a slider inside my button but the state value is not updated until I refresh the browser. Bug or is it a limitation? The custom:slider-entity-row works when not used inside a button.
- type: custom:mod-card
style: |
ha-card {
padding: 8px 16px 20px 16px;
}
card:
type: custom:layout-card
min_columns: 1
max_columns: 1
layout: vertical
justify_content: start
cards:
- type: custom:button-card
name: Gardin
template: slider_button
icon: mdi:blinds
custom_fields:
slider:
card:
type: custom:slider-entity-row
full_row: true
hide_state: false
entity: input_number.curtain_slider
That might be a bug, please open an issue on gh and paste your full button config with the template, I’ll have a look.
You need to use tap-action and call-service like this:
- color_type: blank-card
type: 'custom:button-card'
- color: auto
entity: script.everyday_tv_rum
icon: 'mdi:lightbulb-on-outline'
name: Dag
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.everyday_tv_rum
styles:
card:
- height: 90px
- width: 90px
type: 'custom:button-card'
- color: auto
entity: script.focus_tv_rum
icon: 'mdi:book-open-variant'
name: Focus
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.focus_tv_rum
styles:
card:
- height: 90px
- width: 90px
type: 'custom:button-card'
- color: auto
entity: script.relax_tv_rum
icon: 'mdi:lightbulb-on'
name: Soft
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.relax_tv_rum
styles:
card:
- height: 90px
- width: 90px
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
type: horizontal-stack
Thank you ! It’s working!
not sure if this has been asked before, or if this is of utmost silliness, but please indulge me…sorry
right now, I must use:
button_force_switch_on:
template: button_force_body
show_label: true
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: entity
on a button which has a script for entity. Would it be following core HA, if a script without further data could be called like
button_force_switch_on:
template: button_force_body
show_label: true
tap_action:
action: call-service
service: entity
this would comply with https://www.home-assistant.io/integrations/script/#passing-variables-to-scripts calling a script directly, and would shorten the button-card nicely. @romrider what would think of that?
That will do it:
button_force_switch_on:
template: button_force_body
show_label: true
tap_action:
action: call-service
service: '[[[ return entity.entity_id ]]]'
a yes, ok, thanks!
had already tried
service: '[[[ return entity ]]]'
but forgot I need the entity_id…
cool.
just for my education, why cant we use service: entity? isn’t entity internally referencing entity.entity_id ?
Just in 1 field 
haha, ok I see.
(suppose you couldn’t add a second…?) would make a nice FR if you’d allow.
I was actually thinking to remove the entity_id: entity way of doing it 
not adding a new one and only support '[[[ return entity.entity_id ]]]'
O, I would be a bit disappointed if you would… the ease of simply using ‘entity’ is beaten by no other option…
Instead of limiting that, I hope you can keep and expand it to all relevant fields that can use ‘entity’ without further need for the template format…