@Rondom Not supported, open an issue on github as a feature request
I know 
But I thought that it maybe was some kind of work around with action or something like that?
Loving this card, thanks very much.
Have just added a customer state color button (to show if my recycling bin needs to go out) - in laptop browser (Chrome and Safari) it successfully renders the color based on state. But in iOS Safari it just shows as grey (iOS Chrome works fine). Any ideas?
Strangely, it does successfully render icon color on a switch/toggle version of the button that I use.
Lovelace UI is:
- type: "custom:button-card" entity: sensor.event_title icon: mdi:recycle action: more_info show_state: true state: - value: "Rubbish & Recycling" color: rgb(60, 179, 113) - value: "Rubbish only" color: rgb(220, 220, 220)
Hi there, firstly, thanks @kuuji for this custom button, it’s really awesome.
I do have a strange problem though, if I add show_state: true the button completely disappears. if I change it to false it comes back.
Here’s my code:
- type: custom:button-card
name: CD
icon: mdi:disc
show_state: true
action: service
service:
domain: switch
action: turn_on
data:
entity_id: switch.amp_cd
Any ideas?
Cheers,
Justin
Got this working fine in Edge in Windows, Chrome on Android and Amazon Fire, and Silk Browser on Amazon Fire. Samsung Internet on Android shows “custom element doesn’t exist: button-card”. Javascript enabled so not sure what’s missing.
@kuuji would it be possible to use label templates in a future update by any chance please?
For example, I have the following buttons where the number of open windows/doors shows within the text:
I call this using:
label_template: "return 'All Lights: ' + entities['sensor.lights_on'].state;"
which was possible using Custom UI Tiles (no longer developed which is a shame).
Given that the code was removed from GitHub by the dev (grr), I’ve searched for “label_template” within the code to give the following extract just in case it helps.
computeLabel(hass, entity) {
if (entity.label) {
return entity.label;
} else if (entity.label_template) {
return this.computeFromTemplate(hass, entity, 'label_template');
} else if (entity.label_state || DOMAIN_SENSOR.includes(entity.entity.split('.')[0])) {
const stateObj = hass.states[entity.label_state];
if (stateObj) {
return stateObj.attributes && stateObj.attributes.unit_of_measurement ? `${stateObj.state} ${stateObj.attributes.unit_of_measurement}` : stateObj.state;
}
}
return '';
}
hasLabelSec(entity) {
return entity.label_sec || entity.label_sec_state || entity.label_sec_template;
}
computeLabelSec(hass, entity) {
return this.computeLabel(hass, {
label_template: entity.label_sec_template,
label_state: entity.label_sec_state,
label: entity.label_sec,
entity: entity.entity });
}
The original code can be found via a link here: Custom UI: Tiles
On another note, can we span buttons like the above screenshot example?
1 Like
@jarrah
you dont need to use a label template just use a combination of:
entity: sensor.lights_on
name: "all lights: "
show_state: yes
1 Like
I’m getting this error in my log:
https://MYDOMAIN.duckdns.org/local/button-card.js:14:38 Uncaught TypeError: Cannot read property 'entity' of undefined
Any ideas?
I have
- type: custom:button-card
entity: sensor.fan_speed
show_state: true
name: Speed
action: service
service:
domain: switch
action: toggle
data:
entity_id: switch.office_fan_speed
it does what I want turn fan speed to high /low
BUT
the more_info pop up all so dont want that to happen
what am i missing
I love the idea of seperate actions for tap and hold. It seems this is already reflected in the documentation which refers to attributes “tap-action” and “hold-action”. Is this being implemented? 
2 Likes
Yes it is, Lovelace version was released a couple of weeks ago. Can use both legacy setups to get you going and has a new version too.
The state “on/off” for my buttons is not working (the colors are not changing), what am I missing?
- type: custom:button-card
color_type: card
color: '#999999'
color_off: '#444444'
name: Kitchen
icon: mdi:lightbulb
action: service
service:
domain: switch
action: toggle
data:
entity_id: switch.kitchen_lights
style:
- text-transform: none
It’s always like this, not changing nor for on and for off:
Try this. I’m not sure about your service section. This is currently working for me
- type: "custom:button-card"
entity: light.master_pots_dimmer
icon: mdi:lightbulb
color: auto
color_type: card
default_color: rgb(255, 233, 155)
action: toggle
name: Home
style:
- font-size: 12px
- font-weight: bold
Replace the entity portion with your switch id
This one is working. I can confirm using “action: sevice” cause disability to set the colors.
It solved for my switches, but I can’t trigger scenes without using action service call.
Solved by adding the entity (despite the action service call):
Ahh yes, thanks for the tip!
One benefit of having a separate label template is that the button colour status could be based on another entity. Using a Custom UI Tiles example:
- entity: input_boolean.window_is_open
label_template: "return 'Windows: ' + entities['sensor.windows_open'].state;"
icon_template: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
@kuuji Based on the above, could the Button Card state option be expanded to include another entity, e.g.
- type: "custom:button-card"
entity: sensor.windows_open
name: "Windows"
show_state: yes
state:
- entity_id: input_boolean.window_is_open
value: 'on'
color: rgb(5, 147, 255)
- entity_id: input_boolean.window_is_open
value: 'off'
color: rgb(189, 255, 5)
Following on from this, is there a way to alter the icon based upon the entity state? e.g.
icon_template: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
Thanks!
A Lovelace version of Custom UI Tiles? Could you point me to where this is please?
Unsurprisingly, the Custom UI Tiles thread on here