I’m curious. Why do you even have the input boolean? why not just a service call?
Mhh, don’t know 
build this quite a while a go when this button card was not that advanced as it is now…
Been looking as some examples and would expect below to work. When I change the template under Icon to just color: green it all works. With the template it does not even show the button.
Probably something small but I’m stuck.
- color: var(--primary-text-color)
color_off: var(--disabled-text-color)
color_type: icon
default_color: var(--primary-text-color)
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
styles:
icon:
- color: >
[[[ if (switch.fibaro_system_fgwpef_wall_plug_gen5_switch.state
=='on') return 'green'; return 'grey'; ]]]
type: 'custom:button-card'
Just a quicky, is it possible to specify different actions (eg tap_action) for custom_fields?
In an effort to minimise custom cards and to keep maximum control over my designs, I have basically recreated the multiple-entity-row card using button-card, so have 2 different entities show in one button-card, and I would like to show the relevant more-info for each entity ?
If an entity name is too long for the button, is it possible to break the text in a new line?
I tried css attributes overflow-wrap, line-break and word-break but nothing worked.
Hm, I actually had this problem too. What I currently do now is put the first line in name and the second line in label. This way it does do a bit what you want, though you won’t be able to use the same label for something else this way.
Try this:
if (states['switch.fibaro_system_fgwpef_wall_plug_gen5_switch'].state
=='on') return 'green'; return 'grey';
Yes it is possible if the embedded card supports tap_action or whatever else
Should be possible, try with those styles:
- white-space: initial
- text-overflow: initial
- overflow: initial
3 Likes
This works very nice! Thank you.
Hello. Did you find any solution for dynamic color change?
Could anyone give me some guidance on how to add custom button card in a conditional card?
The custom button card should be reflected in the listed entities based on the selection.
title: Room Selection/Schedule
type: vertical-stack
cards:
- entities:
- entity: input_select.rooms
- entity: sun.sun
show_header_toggle: false
type: entities
- card:
entities:
- switch.bedroom1
- switch.bedroom2
- switch.bedroom3
- switch.bedroom6
- switch.bedroom7
- input_select.bedroom
type: entities
conditions:
- entity: input_select.rooms
state: Bedroom
type: conditional
This should work:
title: Room Selection/Schedule
type: vertical-stack
cards:
- entities:
- entity: input_select.rooms
- entity: sun.sun
show_header_toggle: false
type: entities
- card:
entities:
- type: custom:hui-vertical-stack-card
cards:
- type: custom:button-card
entity: switch.bedroom1
- type: custom:button-card
entity: switch.bedroom2
- type: custom:button-card
entity: switch.bedroom3
type: entities
conditions:
- entity: input_select.rooms
state: Bedroom
type: conditional
Thanks sti0
Much appreciated. Does work like a charm.
Thanks for the assistance
I have one more question:
If I want to have the horizontal stack duplicated.
I can add additional horizontal stacks but it adds is into the same frame of the first stack Meaning it just adds more buttons below the first row.
I want a second custom card so I can kind of separate the two custom cards by their frame.
- card:
entities:
- type: 'custom:hui-horizontal-stack-card'
cards:
- type: 'custom:button-card'
entity: switch.bedroom1
- type: 'custom:button-card'
entity: switch.bedroom2
- type: 'custom:button-card'
entity: switch.bedroom3
type: entities
title: Room Selection/Schedule
type: vertical-stack
cards:
- entities:
- entity: input_select.rooms
- entity: sun.sun
show_header_toggle: false
type: entities
- card:
entities:
- type: 'custom:hui-horizontal-stack-card'
cards:
- type: 'custom:button-card'
entity: switch.bedroom1
- type: 'custom:button-card'
entity: switch.bedroom2
- type: 'custom:button-card'
entity: switch.bedroom3
type: entities
conditions:
- entity: input_select.rooms
state: Bedroom
type: conditional
Sorry I’m not sure what you like to achieve. You can add a vertical stack and wrap the horizontal stacks within. If this is not what you want to do please describe more precise.
title: Room Selection/Schedule
type: vertical-stack
cards:
- entities:
- entity: input_select.rooms
- entity: sun.sun
show_header_toggle: false
type: entities
- card:
entities:
- type: custom:hui-vertical-stack-card
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: switch.bedroom1
- type: 'custom:button-card'
entity: switch.bedroom2
- type: 'custom:button-card'
entity: switch.bedroom3
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: switch.bedroom1
- type: 'custom:button-card'
entity: switch.bedroom2
- type: 'custom:button-card'
entity: switch.bedroom3
type: entities
conditions:
- entity: input_select.rooms
state: Bedroom
type: conditional
i can do this:
but trying to achieve this:
Ok. Just do this:
title: Room Selection/Schedule
type: vertical-stack
cards:
- entities:
- entity: input_select.rooms
- entity: sun.sun
show_header_toggle: false
type: entities
- card:
entities:
- type: 'custom:hui-horizontal-stack-card'
cards:
- type: 'custom:button-card'
entity: switch.bedroom1
- type: 'custom:button-card'
entity: switch.bedroom2
- type: 'custom:button-card'
entity: switch.bedroom3
type: entities
conditions:
- entity: input_select.rooms
state: Bedroom
type: conditional
- card:
entities:
- type: 'custom:hui-horizontal-stack-card'
cards:
- type: 'custom:button-card'
entity: switch.bedroom1
- type: 'custom:button-card'
entity: switch.bedroom2
- type: 'custom:button-card'
entity: switch.bedroom3
type: entities
conditions:
- entity: input_select.rooms
state: Bedroom
type: conditional
Please try the updated version. I changed it after I posted the solution you mentioned lately.
What you did is different from what @sti0 showed you. He proposed 2 conditional cards, 1 for each line, you have only one 