Ah. You are correct on both accounts. Quotes don’t matter and default_color is quoted in an example though not listed under the options.
To reply again, the two things that stand out to me are:
-
Your use of “default_color:” in the locked condition card. You didn’t specify a color and it looks like default_color should only be decleared when you’re using different state colors or when color is set to auto. As your color_type is set to icon, you haven’t defined a color for the icon. In which case it may be reverting back to your theme’s primary-text-color and making it seem as if it’s not displaying. try declaring a “color:” option and see what that does.
-
On the unlocked card, you also don’t declare a color anywhere on the card, so it could be the same issue. Again, try declaring a “color:” option and see what that does.
It’s not color related. I declared “color” like you said. The moment I put “show_state: true”, it disappears:
Someone else that experience the following error?
https:/URL:8123/frontend_latest/8ee9235853b66c6b78f9.chunk.js:3254:365 Uncaught TypeError: Cannot read property 'replaceChild' of null
When I out-comment the custom-button cards the error is gone. Already posted an issue at github.
@kuuji can you please take a look at the error?
Love this element. In fact almost replaced all the other elements with yours. It takes much less space, is way more informative.
P.S. Also is there a chance you can review your position on including this in the official repo? A lot of users appreciating your work will benefit from that.
I know about your position from the post on the Oct 18th. But bright ideas come to several people around the world at the same time. So unless large chunks of code were stolen from you - maybe it’s just one of those cases.
In 0.88.0b0 icons and text is left aligned.
Can this be fixed with style options?
The first 2 buttons are standard lovelace but the third is an input_boolean with the custom button card (so it shows a different colour when it’s on/off - not supported by lovelace one.
Any way to fix the look of this? (Note this is 0.88.0b0 - up to 0.87.1 it was perfect)
Same issue in 0.87.x in Firefox. After refresh from HA the buttons are normal again. Refresh in FF the buttons look like this:
instead of:
The first button is a light, the second a scene and last one a switch
@Kroontje, @DavidFW1960, do you have size options in your button cards?
size: 80px # icon size
style:
- height: 132px # card size
For me the sizes look good, but the text and icon is top/left aligned.
No, no size options configured. Straight forward config 
How do I get the ‘beach’ icon in the same colour as the other icons (kind a blue, but not black). This seems to be the default colour but the icon on this button card defaults to black.
cards:
- type: 'custom:button-card'
entity: input_boolean.vacation
icon: 'mdi:beach'
color: var(--primary-text-color)
color_off: var(--disabled-text-color)
color_type: card
default_color: var(--primary-text-color)
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.vacation
name: VACATION
state:
- color: 'rgb(255, 255, 0)'
value: 'on'
- color: 'rgb(255, 255, 255)'
value: 'off'
- entity: input_boolean.allalarmoff
icon: 'mdi:bell-ring'
name: Sirene
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.allalarmoff
type: entity-button
- cards:
- card:
action: more_info
card_style: ''
color: var(--primary-text-color)
color_off: var(--disabled-text-color)
color_type: icon
default_color: var(--primary-text-color)
entity: alarm_control_panel.ha_alarm
icon: 'mdi:security'
name: ARMED
size: 40%
state:
- color: 'rgb(0, 255, 0)'
value: armed_away
type: 'custom:button-card'
conditions:
- entity: alarm_control_panel.ha_alarm
state: armed_away
type: conditional
- card:
action: more_info
card_style: ''
color: var(--primary-text-color)
color_off: var(--disabled-text-color)
color_type: icon
default_color: var(--primary-text-color)
entity: alarm_control_panel.ha_alarm
icon: 'mdi:shield-home'
name: ARMED
size: 40%
state:
- color: 'rgb(251, 210, 41)'
value: armed_home
type: 'custom:button-card'
conditions:
- entity: alarm_control_panel.ha_alarm
state: armed_home
type: conditional
- card:
action: more_info
card_style: ''
color: var(--primary-text-color)
color_off: var(--disabled-text-color)
color_type: icon
default_color: var(--primary-text-color)
entity: alarm_control_panel.ha_alarm
icon: 'mdi:bell-off'
name: 'OFF'
size: 40%
state:
- color: 'rgb(255, 0, 0)'
value: disarmed
type: 'custom:button-card'
conditions:
- entity: alarm_control_panel.ha_alarm
state: disarmed
type: conditional
type: horizontal-stack
type: horizontal-stackI have not played with the size options… Might try now…
size 60 and height 90
How about this:
size: 60px
style:
- margin-left: auto
- margin-right: auto
- width: 50%
- margin-top: auto
- margin-bottom: auto
- height: 80px
- padding-top: 10px
Also try height: auto… not perfect on mobile…
1 Like
Thanks! Works, but alot to edit.
It’s like sex, better than nothing! 
Hopefully this will get fixed.
style:
- align-items: center
- text-align: center
- margin-left: auto
- margin-right: auto
- width: 50%
- margin-top: auto
- margin-bottom: auto
- height: 80px
- padding-top: 4%
- padding-right: 0px
- padding-bottom: 4%
- padding-left: 0px
- align-content: normal
- align-self: auto
- font-size: 1.2rem
- font-weight: 400
- position: relative
Not sure this is better… just mimicked the standard button attributes…
Well, some resizing and some custom colors for on/off is all what the buildin buttons need.
But i love this Button card!
1 Like
Seems this is what’s caused it…
Note for Lovelace custom card developers: if you relied on the availability of `<paper-button>` in your code, you will have to update it to `<mwc-button>` to work like before.
1 Like
doesn’t appear to be a straight swap on the syntax though
My button toggles an input boolean which in turn executes an automation. It’s do disable my sirenes etc. if I have a false alarm.
So I can’t really change the button’s color based on the state of the input boolean itself. would love to do this on the state of one of the sirenes. Is this possible ? In other words can I ‘disconnect’ the state part from the actual entity in the button?
According to Balloob (I asked him on Discord) it is but you’re right it doesn’t work.