It makes sense. I just don’t know what you are expecting. You want one button to toggle all lights on or off. But if there is already a mix (some lights on, some off), what do you want the button to do? All on? Or all off?
I essentially want the button to act like the standard group toggle switch. So if anything in that group is on, it turns everything off. The image shows my standard group toggle for my hall. the group is ‘on’ if anything in that group is on, and only ‘off’ if everything is off. I’d just like that functionality in a nicer button.
I understand that I could easily add an on & an off button, but I don’t really want to use all that screen real estate.
Hey folks!
You might have noticed that the latest release of home assistant includes a button-card.
This is not my initiative and I was not included at all into this, even though it was clearly inspired by my project.
You may also have noticed that the official button card doesn’t include all of the features that I’ve been adding for you guys. It looks like the developer has no intention of including these in the future.
On my side I’ll continue working on my project and try and include the features you guys ask.
Cheers!
16 Likes
Yeah I was wondering about that. I read through the docs and saw it doesn’t nearly have what yours does, what’s the point of dumbing down someone’s work? It just confuses users more than anything. Keep up the good job on your version! It’s way better.
You should add these features to the HA core. There is no reason to keep working on custom cards. It is easier to get smaller PRs accepted than trying to add everything.
The project has been around for few months and should have been submitted to the core long time back.
@arsaboo someone on discord told me that some features will never be brought over and that basically this custom project will be the only way to access advanced features.
Besides that, I don’t feel great about this whole thing. If the dev that created this fork in the core repo wanted me to help, He could have mentioned me on the original PR or even here on the forum.
At this point, I don’t feel that my help is welcomed/needed.
1 Like
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