That definitely is not the intention and I am sorry that you feel that ways. Paulus had actually indicated that he was not too happy about folks just developing custom components and not contributing to the core. Since many of these elements were not included in the core, the devs took it upon themselves to then include some of the elements. Now that the initial foundation is laid for many of these elements, it should be easy for others to contribute and the devs certainly hope so. The dev did credit your card in the original PR. You are obviously welcome to work on things that make you happy, but given your skills, I would strongly encourage you to start contributing to the core.
2 Likes
I think I can speak for a lot of other people as well when I say your work is highly appreciated. Really loving the button card you have made 
Keep up the good work, either as a custom card or as part of the core.
It does seem strange that rather than invite you to submit a PR they justwent and did it themselves! that being said dont let it leave a sour taste in your mouth, should definitely still submit PRs to fully migrate the best lovelace card fully into core!
hi everyone IĀ“m having the same problem, any devolepments on this, IĀ“m using on a LG tablet with chrome.
1 Like
Your work is highly appreciated by HASS users, and that is what it counts.
I donāt care if its in the core or is a custom component, as long as is there
Would be cool to have different action when holding the button down.
For example; tapping toggles, holding opens more-info dialog
4 Likes
Is there anyway to get a button to work a link to a different page?
I have tried navigate but it seems that is not supported?
- type: horizontal-stack
cards:
- type: "custom:button-card"
action: navigate
navigation_path: /lovelace/0
icon: mdi:undo-variant
size: 40px
style:
- text-transform: none
- color: white
- background-color: white
anyone have an idea how I can fix this?
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