If you want to install button-card manually you can use HACS or you can go to the github repositories release page: https://github.com/custom-cards/button-card/releases. Nothing to do with the core entity-button.
A single toggle button? No, not without making a custom card that wraps the core ha-switch or something. You could have a toggle button row, however
Uh, your color template is wrong. -1’s don’t work in JS inside getitems.
you need to use
color: >
[[[ if (entity.entity_id.split('.')[1].split('_').splice(-1,1)[0] == 'off') return 'red';
return 'grey';]]]
just so you can see…
yes, thanks, I see indeed.
Still, it doesn’t make the color change to either red or grey…
could you please check if that happens on your side?
did you try the correct template, not the one you posted?
yess:
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'on';
]]]
color: 'red'
- operator: template
value: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
return states['sensor.' + id + '_state'].state == 'off';
]]]
color: >
[[[ if (entity.entity_id.split('.')[1].split('_').splice(-1,1)[0] == 'off') return 'red';
return 'grey'; ]]]
- operator: default
color: 'yellow'
Toggle button row? Not sure what card you’d be referring too.
This is what I have now:
This is roughly what I was hoping to accomplish:
ui-lovelace.yaml:
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
template: main-view
entity: switch.livingroom_lamp_left
size: 24px
name: Left
- type: custom:button-card
template: main-view
entity: switch.livingroom_lamp_right
icon: 'mdi:lamp'
name: Right
template:
main-view:
size: 24px
layout: icon_name
styles:
card:
- border-radius: 15px
- border: solid 2px rgba(236, 239, 244, .1)
name:
- font-size: 14px
tap_action:
action: toggle
state:
- value: 'on'
styles:
card:
- border: solid 2px var(--accent-color)
1 Like
Just the core row in the entities card
custom:hui-toggle-entity-row if using inside the button-card
another challenge…
have these buttons, 12x2, so a lot of icon templates:
- type: custom:button-card
template: button_force_switch_on
entity: script.audio_auditorium_on
icon: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
if (states['sensor.' + id + '_state'].state == 'on') return 'mdi:music';
return 'mdi:music-off';
]]]
How can I write the icon template in my button-template, so that I only have to write the on and off icon in the actual button config:
- type: custom:button-card
template: button_force_switch_on
entity: script.audio_auditorium_on
on-icon: 'mdi:music'
off-icon: 'mdi:music-off'
tried something like:
icon: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
if (states['sensor.' + id + '_state'].state == 'on') return 'id: on-icon';
return 'id: off-icon';
]]]
Would hope the id: on-icon and id: off-icon could be used, but don’t see how to do that in the template.
thanks for having a look?
That’s not possible, but I can add support for variables. Please create a feature request.
It would help also with templating and defining default properties that you could override.
I’m thinking about doing something like:
variables:
var1: value1
var2: value2
# Below would return 'value1 value2'
any_field_with_template: >
[[[ return `${variables.var1} ${variables.var2}` ]]]
ha, thanks for considering! SO cool.
would that work like this then?
button_force_switch_on:
template: button_force_body
show_label: true
label: >
[[[
var id = entity.entity_id.split('_on')[0].split('.')[1];
return states['sensor.' + id + '_state'].state;
]]]
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('_on')[0].split('.')[1];
return states['sensor.' + id + '_state'].state == 'on';
]]]
styles:
card:
- color: '#555B65'
- background: '#F0C209'
icon:
- color: '#555B65'
icon: variables.on-icon
- operator: default
styles:
card:
- color: '#F0C209'
- background: '#555B65'
icon:
- color: '#F0C209'
icon: variables.off-icon
and the button config itself:
- type: custom:button-card
template: button_force_switch_on
entity: script.audio_auditorium_on
variables:
on-icon: 'mdi:music'
off-icon: 'mdi:music-off'
? if that would be possible… yes please!
sure beats what I must do now, which is repeating the state operators for all button configs:
- type: custom:button-card
template: button_force_switch_on
entity: script.audio_auditorium_on
state:
- operator: template
value: >
[[[
var id = entity.entity_id.split('_on')[0].split('.')[1];
return states['sensor.' + id + '_state'].state == 'on';
]]]
id: on-icon
icon: 'mdi:music'
- operator: default
id: off-icon
icon: 'mdi:music-off'
instead of setting the icon in the state section, it could also be done in the global button section:
icon: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
if (states['sensor.' + id + '_state'].state == 'on') return `${variables.on-icon}`;
return`${variables.off-icon}`;
]]]
or even more compressed 
:
icon: >
[[[
var id = entity.entity_id.split('.')[1].split('_').slice(0,-1).join('_');
var icon = 'variables.' + states['sensor.' + id + '_state'].state + '-icon';
return `${icon}`;
]]]
could I link to this post for the feature request? I just did https://github.com/custom-cards/button-card/issues/245
btw, could I ask you to have a look here Lovelace: Button card and check why the template for color won’t do anything, while the color name works as expected?
thanks a bunch!
Thank you. This would be used as a card on it’s own correct?
Hi guys, have a weird issue, and it seems it’s related to button card somehow…
When I turn on the lights (zigbee2mqtt group) via physical button, toggle always works and sets brightness to 100%.
If I use button card, sometimes (and I can’t pin it down…after restart always) it turns on with just 1% brightness. Driving me nuts
Here is my lovelace config:
- type: "custom:button-card"
entity: light.office_desk
icon: mdi:desk-lamp
name: Bed
styles:
card:
- font-size: 12px
- padding: 6%
grid:
- position: relative
name:
- font-weight: bold
- font-size: 13px
label:
- font-size: 13px
- font-weight: bold
icon:
- margin-bottom: 15px
state:
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
show_label: true
show_state: false
size: 24px
color: auto
hold_action:
action: more-info
layout: icon_label
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
1 Like
I don’t see any reason specific to button-card that could lead to that.
If you want to make sure it always goes to 100%, you can use:
tap_action:
action: call-service
service: light.toggle
service_data:
brightness: 255
entity_id: entity
Hello everybody!
Can somebody tell me how to achieve a sensor button like this?
1 Like
Thanks!
I did try, but it gives me error “extra keys not allowed @ data[‘entity’]”
This is the config…without all the css stuff
- type: "custom:button-card"
entity: light.ikea_kitchen
icon: mdi:ceiling-light
name: Kitchen
tap_action:
action: call-service
service: light.toggle
service_data:
brightness: 255
entity: light.ikea_kitchen
Sorry, I edited the original post to correct it
That did the trick! Awesome, much appreciated
Hi
with the following code I am getting the following image. How can I add one more button beside it?
In my set up right now I have a few more default cards but there is space beside it to fit one more button
type: 'custom:button-card'
entity: climate.living_room_ac
icon: 'mdi:cube'
color: 'rgb(28, 128, 199)'
name: Living Room AirCon
font-size: 2px
state:
- value: 'off'
color: 'rgb(134, 134, 134)'
styles:
card:
- height: 140px
- width: 140px
- font-size: 14px
Also please tell me how can I change the images with custom or even better if there are some ready ones I could “download”?
Trying to migrate over from tiles-card and everything works so far.
The only thing I haven’t figured out yet is how do I allow the button card to sit within another card.
I like it more when they’re grouped together and have a little background color.
To make it more visually clear:
- 1st row is button-card
- 2nd row is tiles-card
I tried with - type: entities but that won’t work because they’ll sort vertical instead of horizontal.
The current code I have is:
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: card
styles:
card:
- height: 40px
icon:
- height: 25px
icon: mdi:desktop-classic
tap_action:
action: call-service
service: script.scene_computer
- type: custom:button-card
color_type: card
styles:
card:
- height: 40px
icon:
- height: 25px
icon: mdi:apple
tap_action:
action: call-service
service: script.scene_apple_tv
Thanks!