Removing the inner brackets i get this error:
Service [[[ this.dispatchevent(new event('hass-toggle-menu', { bubbles1: true, composed: true})) return none; called service [[[ this.dispatchEvent(new Event('hass-toggle-menu', { bubbles1: true, composed: true})) return none; which was not found.
I’m trying with this code, but if there’s another way to toggle the menu button with button-card, let me know.
It appears the button card does not like to execute the services when nested. I wanted to test how it was grouping the buttons and didn’t expect positive results without renaming bubbles1 back to bubbles.
I have zero experience with using a button in a button, or with the service at hand. However, could it have to do with the ‘path’ to the actionable item?
As if somehow the nested button doesnt get out of the main button to the menu item, and has no item to perform the action on, hence ending up logging none?
I suppose this would be an issue to post on the Button-card repo, as it is not yet provided for, and it would seem a nice addition to the power of button-card
For the time being, I’d suggest to use any of the other available options, and redesign your card to the options that do work… 
I think I finally managed to do it. I had to use helpers and automations to achieve it.
HELPERS
input_boolean.button_menu
input_boolean.button_back
input_boolean.button_forward
AUTOMATION
alias: Buttons State OFF
trigger:
- platform: state
entity_id:
- input_boolean.button_menu
to: "on"
for:
seconds: 1
- platform: state
entity_id:
- input_boolean.button_back
to: "on"
for:
seconds: 1
- platform: state
entity_id:
- input_boolean.button_forward
to: "on"
for:
seconds: 1
action:
- service: input_boolean.turn_off
target:
entity_id: input_boolean.button_menu
data: {}
- service: input_boolean.turn_off
target:
entity_id: input_boolean.button_back
data: {}
- service: input_boolean.turn_off
target:
entity_id: input_boolean.button_forward
data: {}
mode: single
CHIP BUTTONS
type: custom:button-card
styles:
card:
- padding: 0px 0px 0px 0px
- box-shadow: none
- background: none
- border: 0
grid:
- grid-template-columns: auto
- grid-template-areas: |
"bnt_1 bnt_2 bnt_3"
custom_fields:
bnt_1:
- justify-self: center
bnt_2:
- justify-self: center
bnt_3:
- justify-self: center
custom_fields:
bnt_1:
card:
type: custom:button-card
entity: input_boolean.button_menu
icon: mdi:menu
show_name: false
tap_action:
action: toggle
variables:
menu: |-
[[[
if (states['input_boolean.button_menu'].state === 'on') {
this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true }));
}
]]]
styles:
icon:
- width: 20px
- color: white
card:
- border-radius: 100px
- width: 39px
- height: 39px
- background: rgb(39,39,39)
- box-shadow: none
bnt_2:
card:
type: custom:button-card
entity: input_boolean.button_back
icon: mdi:arrow-left
show_name: false
tap_action:
action: toggle
variables:
back: |-
[[[
if (states['input_boolean.button_back'].state === 'on') {
history.back();
}
]]]
styles:
icon:
- width: 20px
- color: white
card:
- border-radius: 100px
- width: 39px
- height: 39px
- background: rgb(39,39,39)
- box-shadow: none
bnt_3:
card:
type: custom:button-card
entity: input_boolean.button_forward
icon: mdi:arrow-right
show_name: false
tap_action:
action: toggle
variables:
forward: |-
[[[
if (states['input_boolean.button_forward'].state === 'on') {
history.forward();
}
]]]
styles:
icon:
- width: 20px
- color: white
card:
- border-radius: 100px
- width: 39px
- height: 39px
- background: rgb(39,39,39)
- box-shadow: none
let me see if my former forward and back buttons did something alike:
- type: custom:button-card
template: button_shortcut_menu
tooltip: Back
icon: mdi:arrow-left
show_name: false
tap_action:
action: toggle
entity: input_boolean.back_button
variables:
back: |
[[[
if (entity.state == 'on') {history.back() ;}
]]]
- type: custom:button-card
template: button_shortcut_menu
tooltip: Forward
icon: mdi:arrow-right
show_name: false
tap_action:
action: toggle
entity: input_boolean.forward_button
variables:
next: |
[[[
if (entity.state == 'on') {history.forward() ;}
]]]
and I used these automations there:
automation:
# needed for Javascript in buttons shortcut menu
- alias: Back button
id: back_button
mode: single
trigger:
platform: state
entity_id: input_boolean.back_button
to: 'on'
action:
service: input_boolean.turn_off
target:
entity_id: input_boolean.back_button
- alias: Forward button
id: forward_button
mode: single
trigger:
platform: state
entity_id: input_boolean.forward_button
to: 'on'
action:
service: input_boolean.turn_off
target:
entity_id: input_boolean.forward_button
somehow that seems much simpler, but I need to check if the results is the same…
seems awfully indentical if you ask me… I do remember though it wasnt reliable, and in the end did away with them. I just had to find them in my 2022 backups .
Admit I didnt have the menu item button, and that service is new to me.
Do you have some documentation where you got that from?
I have experienced this in the past (here) when using a button is inside a button. Using another type of card inside the button card worked for me in the past, but I like your resolution. Nice workaround!
The solution of the helper buttons with automations was something you had shared in the past, and I took the menu code from here:
https://gist.github.com/vlaraort/b74d6c3113f1a031245d27329e1f22f7
Right now I’m facing another difficulty, perhaps simpler than the previous one, but I’m having trouble solving it…
I want to have two font sizes and have them centered in the middle of the card.
type: custom:button-card
icon: mdi:home-thermometer
entity: sensor.temperatura_media_casa
show_entity_picture: true
show_name: false
show_state: true
tap_action:
action: more-info
styles:
icon:
- width: 22px
- color: |-
[[[
var state = states['sensor.temperatura_media_casa'].state;
if (state <= 18) {
return 'rgb(100,149,237)'; //blue
} else if (state <= 24) {
return 'rgb(244,208,63)'; //yellow
} else {
return 'rgb(231,76,60)'; //red
}
]]]
img_cell:
- background: |-
[[[
var state = states['sensor.temperatura_media_casa'].state;
if (state <= 18) {
return 'rgba(100,149,237,0.2)'; //blue_t
} else if (state <= 24) {
return 'rgba(244,208,63,0.2)'; //yellow_t
} else {
return 'rgba(231,76,60,0.2)'; //red_t
}
]]]
- border-radius: 100%
- width: 30px
- height: 30px
state:
- font-size: 14px
- font-weight: 500
card:
- border-radius: 100px
- width: 100%
- height: 39px
- background: rgb(39,39,39)
- box-shadow: none
- padding: 0px 10px 0px 5px
grid:
- grid-template-columns: min-content 1fr
- grid-template-areas: |
"i s"
- gap: 0px 10px;
That is a tough one. They are grouped together.
i have tested using label and name with template but not figure out how to center the data
You can use the custom field option. Referencing the state then splitting the UoM from that state was what I was specifically referencing.
For example this is 4 separate buttons inside a main button card.
You can do the same with the state.
Hello guys:
I am starting to create my dashboard and here you are my first problem.
I would like that the icon is BLUE when ON, and ORANGE when off…
this is my code… the color is showed good only when ON:
- type: custom:button-card
entity: light.colector_alex_hab_valeria
color_type: icon
color: rgb(70, 116, 156)
color_off: rgb(253, 192, 47)
Thank you
Hi, try this:
- type: custom:button-card
entity: light.colector_alex_hab_valeria
state:
- value: 'on'
color: 'rgb(70, 116, 156)'
- value: 'off'
color: 'rgb(253, 192, 47)'
Hello. that WORKED…
thanks a lot for your fast help
Hi, I have a custom button card with a entity picture ( the currently playing cover). It is possible to fade in the image every time that change? Now load without any transition.
Thanks in advance
Potentially stupid question here (I am NOT experienced with CSS). I’m trying to use the custom button card to change icon colours based on entity state. I have a theme installed (Caule). Only the theme colours show - is there a way to override the theme within the custom button card?
They say there’s no stupid question, only stupid answers… 
Back to topic: i use this system for such cases:
styles:
icon:
- color: |
[[[
if (states['sensor.whatever'].state =='on')
return "red"
else
return "lime"
]]]
Hi, thanks for this. And that does indeed override the theme colours. I can use this to do exactly what I wanted. Kudos to you, very grateful. Although being me I want to know why, but that is for another day.
Because button-card supports JavaScript’s - they are one of most powerful functions of button card. You can do pretty much anything with it, for example:
name: | #or label, or any custom field...
[[[
if(states['sensor.temperature.out'].state > '25')
return "it's hot outside"
else if (states['sensor.temperature.out'].state > '15')
return "it's ok outside"
else
return "it's cold outside"
]]]
you can also define state to show another thing and not real state of sensor, but in this case it’s like this:
show_state: true
state_display: |
[[[
if(states['sensor.status.ups'].state =='online')
return "UPS works on power"
else
return "UPS runs on batteries"
]]]
etc…
check button-card’s github page, there are many examples there.
I think that 50-70% of my cards are made with this button card. I’m dead if this card stops working…
Thanks for these example, gives me food for thought. I have solved my original issue, which is really embarrassing. I was using an input_boolean as the entity to test as I didn’t want to keep messing with the state of my aircon. Of course the boolean can only have two states, but I was trying to set it to e.g. heat, cool, etc and this of course messed up the cards actions and defaulted to the theme colours. Once I relpaced it with a dropdown helper with multiple states it all worked as expected. Here is my working code:
type: custom:button-card
entity: input_select.dummy_a_c
name: Bedroom
show_state: true
state:
- value: heat
color: red
icon: mdi:fire
- value: cool
color: blue
icon: mdi:snowflake
- value: 'off'
color: grey
icon: mdi:fan-off