can you strip out a single button from that mess please? Too much to look at and debug.
Guys, I started using this card yesterday and it’s great for many jobs.
I didn’t read all 3012 post in this topic (read the docs though) but could anyone tell me why almost every option is templatable but not color? It would be useful… or I don’t need it provided I use card_mod for things like hiding box_shadow?
And one more thing - is it correct that we can change label and name but we cannot do anything about state’s content?
color is a style, all styles should be handled under the state field
state:
- value: 'on'
styles:
icon:
color: blah
- value: 'off'
styles:
icon:
color: blah
sure you can, use a custom_field and call it fakeState 
use it all the time to combine the use of label for last_changed, but also want to see other values that are not the state. Combining those can save precious button real estate…
you could even use that in a state template if you’d like
- value: 'on'
custom_fields:
stateDisplay: >
[[[ var fakestate = `<span style="color: #F0C209;"> ${entity.state}:</span>`;
var fakelabel = `<span style="color: #F0C209;"> ${Math.round(entity.attributes.brightness / 2.55)} %</span>`;
return fakestate +' ' + fakelabel;]]]
or use the name field for it, (that’s the great thing about Button-card, you can template anything into anything):
name: >
[[[
var fakestate = `<span style="color: red;font-size: 11px;word-wrap:break-word;"> ${entity.state.substr(0, entity.state.length-11)} </span>`;
return 'Last motion' + "<br>" + fakestate
]]]
1 Like
Hi lovely card, however im having issues with the icon not begin aligned left
can someone tell me whats wrong please?
button_card_templates:
light_button:
color_type: label-card
styles:
card:
- width: 125px
- height: 125px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- align: start
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-size: 20px
state:
- justify-self: start
- padding-left: 10px
show_label: false
show_state: true
state:
- value: 'on'
styles:
card:
- color: black
icon:
- color: orange
tap_action:
action: toggle its centered instead of left
sounds reasonable, will try that.
UPDATE:
here’s the correct way that worked for me:
state:
- operator: template
value: "[[[return isFinite(entity.state.split(' ')[0])]]]"
icon: 'mdi:power-off'
styles:
icon:
- color: 'gray'
well, I only had access to docs and they list both icon and color at the same level and it didn’t work. Actually, looking closer to the docs, that color is very versatile as may be applicable to background/icon/etc but it’s just a string and that inside styles can be a template!
last night I decided not to dive into that, sounded too abstract
yes, but I’m yet to link it with state of my entity… as it’s the state that being compared to value, isn’t it?
I know I can template name and label, but the thing is they all have their own names in the card’s grid and my main problem was to position two strings to the right from the icon (name and label) and one to the right of them (here’s my code).
Looks like I need to learn about custom_field asap
UPDATE2: thanks @Mariusthvdb, it wasn’t clear after reading the docs (to me) what these custom_fields are for. Now my card works without additional sensors, happy days!
I have a similar problem and so far was unable to change it.
Here’s how it looks:
Can we use the javascript switch in templates?
If so can someone tell me how please.
This doesn’t seem to work…
[[[
var cycle = 'none';
switch(cycle)
case 'none':
return 'Idle';
default:
return 'Something Else';
]]]
I believe you’re just missing opening and closing braces. Try this:
[[[
var cycle = 'none';
switch(cycle) {
case 'none':
return 'Idle';
default:
return 'Something Else';
}
]]]
But the problem is not on a single button the problem happens when i combine the following cards
- content
- custom:button-card
- conditional
- horizontal-stack
- vertical-stack
- Entities
And i cant single them out cause the transparent problem only happens when ever they are all combined and it happens direcly after the entities funktion.
So the only way to se it is to use it as i have. I tripped my whole homeassistant from swipe cards and compact header and others to see if thats what causing it.
Its propably either my code or something with the combination.
The cleanest i have so far with the worked upp version to have as little wierd things it it as i myself can come upp with is the folowing.
cards:
- content: |
## <ha-icon icon="mdi:remote"></ha-icon> Vardagsrum
type: markdown
- cards:
- type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
entity: switch.appletv
icon: 'mdi:apple'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Apple tv
entity_id: remote.vardagsrum
- type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
entity: switch.htpc
icon: 'mdi:desktop-classic'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Htpc
entity_id: remote.vardagsrum
- type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
entity: switch.tv
icon: 'mdi:television'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: Tv
entity_id: remote.vardagsrum
- type: 'custom:button-card'
color: var(--secondary-text-color)
color_type: icon
entity: switch.ps4
icon: 'mdi:playstation'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: PS4
entity_id: remote.vardagsrum
- type: 'custom:button-card'
color: var(--red)
color_off: var(--primary-text-color)
color_type: icon
icon: 'mdi:power'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_off
service_data:
entity_id: remote.vardagsrum
type: horizontal-stack
- entities:
- input_select.freetoair
type: entities
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:exit-to-app'
name: HDMI 1
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi1
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-up'
name: HDMI 2
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi2
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:menu'
name: HDMI 3
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi3
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:volume-plus'
name: HDMI 4
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi4
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:exit-to-app'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_exit
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-up'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_upp
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:menu'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_menu
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
double_tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeUp
device: 52940343
entity_id: remote.vardagsrum
icon: 'mdi:volume-plus'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeUp
device: 52940343
entity_id: remote.vardagsrum
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-left'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_left
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:smoke-detector'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ok
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-right'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_right
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
double_tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeDown
device: 52940343
entity_id: remote.vardagsrum
icon: 'mdi:volume-minus'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeDown
device: 52940343
entity_id: remote.vardagsrum
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:volume-off'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_mute
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-down'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ner
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:keyboard-return'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_prev
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:arrow-up-bold'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_channel_up
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:gamepad-variant'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.gamemode
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:play-pause'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_play
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:television-guide'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_guide
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:arrow-down-bold'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s;
}
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_channel_down
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
type: vertical-stack
And it still pops upp from enteties and continued. All buttons have condition that they only show when not in power off state on the harmony remote.
Well for 1, you are using card mod on the button card. You don’t want to do that. You’re having the button card settings fight with card mod.
Still happens with or without it so its not about the card mod.
Allso if it was it would happen to the row above the Entities.
I can understand that some error happens and then kill the rest Of all Cards it renders.
But so far my search has taken me to the conclution that it happens when all these different Cards are brought together.
Worth to note that i have not seen it on a diffrent tab then the first main page. And that took me to think it was some other mod doing it. But so far i still have the same problem with all things removed but the card.
Brilliant thanks.
I don’t know how I missed that after all my pouring over the docs on w3schools!!!
That is probably a bug, could you report it on github?
Nothing different from card, I wanted to deprecate it at some point…
%age is based on the width of the parent object, so px if probably better in your case.
Will do, glad to contribute to this magic card!
Another quick question…
Why doesn’t this work i.e the button shows a tap but does nothing,
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: "[[[ return states[entity].attributes.friendly_name; ]]]"
But this does i.e. it opens the pop-up with the correct title.
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: "[[[ return states['input_text.my_input_text'].attributes.friendly_name; ]]]"
Thanks 
What the entity of the button?
title: “[[[ return states**[entity]**.attributes.friendly_name; ]]]”
It varies as I am using lovelace_gen but it always aeither an input_select or an input_text.
can U post the Whole code for the button.
Here you go…
As I said it uses lovelace_gen
type: custom:button-card
entity: {{ entity }}
name: {{ name }}
label: {{ label | default('') }}
icon: {{ icon | default('') }}
size: {{ size | default('30%') }}
show_state: true
show_label: true
tap_action:
action: {{ tap_action | default('call-service') }}
service: browser_mod.popup
service_data:
title: "[[[ return states[entity].attributes.friendly_name; ]]]"
card:
type: entities
entities:
- entity: {{ entity }}
name: ' '
icon: {{ icon | default('') }}
deviceID:
- this
styles:
grid:
- grid-template-areas: >
[[[
if ('{{ label }}' == '') return '"i n s"';
else return '"i n s" "i l l"';
]]]
- grid-template-columns: 15% 1fr min-content
- grid-template-rows: >
[[[
if ('{{ label }}' == '') return '1fr';
else return '1fr 1fr';
]]]
card:
- font-size: 14px
- padding: 0px 0px 0px 0px
name:
- justify-self: start
label:
- justify-self: start
- color: var(--secondary-text-color)