Everyone should read the documentation 
:
Extract:
Inside the javascript code, you'll have access to those variables:
* entity: The current entity object, if the entity is defined in the card
* states: An object with all the states of all the entities (equivalent to hass.states)
* user: The user object (equivalent to hass.user)
* hass: The complete hass object
So you can access the entity state with entity.state 
yes, but I might have misunderstood this:
Define your config template in the main lovelace configuration and then use it in your button-card.
thought you implied that to be needed in the ui-lovelace.yaml… I take it now you mean the main setup for the card itself? Which would be perfect, thanks!
You’ll be able to include the button-card templates config using the usual !include
It’s - --paper-card-background-color: 'rgba(149, 165, 166, 1)' (you’re missing the double dashes)
yes! thanks, was searching for that in the docs, but only found full paths…
using this now works just fine, and makes it possible to lift that out to the main config template I hope. makes many lines of code superfluous … 
label_template: >
var bri = Math.round(entity.attributes.brightness / 2.55);
if (entity.state === 'on') return bri + '%';
seeking some more help please. I am trying to get a shallower but wider button to show Icon and label next to each other, centered on the button.
Just like this:
I’ve reached this:
but am lost for now which of the possible options I should change, would you please have a look? (to be precise: I want the icon, name and state centered in horizontal and vertical center…
type: vertical-stack
cards:
- type: 'custom:button-card'
# color_type: label-card
# color: auto
name: All hallway and ambient lights
entity: group.all_hallway_lights
layout: icon_name_state
# color: auto
size: 20px
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
# - border-radius: 12px
- width: 330px
- height: 40px
- --paper-card-background-color: rgb(255, 251, 239)
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
# - padding: 0px 10px
# - justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
# - padding: 0px 10px
# - justify-self: start
- text-transform: capitalize
- font-weight: bold
# - padding-left: 10px
# grid:
# - grid-template-areas: '"i" "n" "s"'
# - grid-template-columns: 1fr
# - grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
- margin-left: 10px
name:
- justify-self: center
# - padding-left: 10px
- font-weight: bold
- font-family: Helvetica
- font-size: 11px
state:
- value: 'on'
#spin: true (uncomment this line for spinning icon)
styles:
name:
- color: black
state:
- color: gray
- value: 'off'
style:
- opacity: 0.4
styles:
icon:
- color: gray
name:
- color: gray
state:
- color: gray
- value: 'unavailable'
style:
- opacity: 0.2
- color: black
- --paper-item-icon-color: black
btw for now Ive ‘guessed’ the width of the top button to be 3 times a single button with something extra, but what would be the precise way of calculating that? Which variable is defining the space between buttons?
Thanks for having a look!
hi there
i have this code:
type: vertical-stack
cards:
i wish that when states[‘sensor.riscoincendio’].state; is iqual to value A then the card is RED. when value is B is green. when Value is C is yellow…and other values
how can i do this?
If you only want to show that when the state is on, then you adjust the states: “off” style to make the attribute in question invisible.
custom_button_light_active_glow: &custom_button_light_active_glow
type: "custom:button-card"
layout: icon_label
color: auto
show_state: true
show_name: true
show_label: true
styles:
grid:
- grid-template-rows: 30px auto 30px
card:
- border-radius: 15px
- height: 105px
- width: 105px
- margin: 5px 5px 0px 0px
icon:
- align-self: end
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
label:
- align-self: end
- padding: 1px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
state:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 5px 10px
lock:
- align-items: flex-end
state:
- value: "on"
styles:
card:
- --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
name:
- color: white
state:
- color: white
label:
- color: white
- value: "off"
styles:
label:
- color: rgba(0, 0, 0, 0.0)
tap_action:
action: toggle
hold_action:
action: more-info
- <<: *custom_button_light_active_glow
name: Lights
entity: switch.living_room
icon: mdi:alpha-l-box
label_template: >
var i;
var entities = states['group.living_room'].attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
return count.toString() + ' of ' + entities.length.toString();
- <<: *custom_button_light_active_glow
label_template: >
var bri = Math.round(states['light.living_room'].attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
name: Light
entity: light.living_room
- <<: *custom_button_switch_active_glow
name: Outlet
entity: switch.living_room_window
The section in question that shows/hides the label text is
- value: "off"
styles:
label:
- color: rgba(0, 0, 0, 0.0)
is this in fact showing it but in an invisible color? Hence not changing the positioning of the other elements?
I am using this label_template now:
label_template: >
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
could that be placed in the Anchor also? since it uses entity.state or entity.attributes and no longer the hard coded name?
Correct, it’s there but transparent. Shape stays the same, no need to manage other styles.
Yes, but it will only work with light domain. If you attempt to use that anchor with a switch, it won’t show because the JS will have an error.
I understand.
I thought these anchors could only be used in the file they are declared in. Since I try to use my views with !includes this would be in a button_lights.yaml file, and only configuring sets of Lights buttons…
No issues with switches… Might have to think it over, because I am not sure I need the brightness on all buttons, especially the count buttons. Unless there would be an override setting, or maybe use the same trick with the transparent color 
Wait for the next version please, it will solve this exact problem 
no way to override, just make an anchor for count buttons and an anchor for light % buttons. That’s all I do. Still cuts the config down. And next version will have this templating crap so you can just use a template instead of an anchor. I’d guess that templates can merge better than anchors because you won’t get that double config attribute error in your logs with templates. Is that correct to assume @RomRider?
ok I will, but in the meantime I am learning… thanks to you both!
got this far. cool!
Yes, no such error with the new template feature.
Hey @RomRider
using layout: icon_name_state, what else do I need to set to have these centered vertically and horizontally?
in Lovelace: Button card posted few posts above, I’ve shared my config, and probably should leave out some extra settings I copied from the other buttons. Sofar, I find it rather difficult to accomplish such a simple goal… duh. what am I not seeing…
Try removing the padding from the card itself.
card:
- padding: 0px 0px
Try the config on this post, if I understand correctly that’s probably what you want:
Lovelace: Button card
You might need to adjust the layout and the grid-template-areas and columns
thats getting there! thanks you very much indeed:
using icon_name as in the post:
and icon_name_state:
only thing left is the vertical positioning to the center…
even after heightening the button somewhat, vertical centration wont work…
btw @petro, thanks for your fine counter template! was looking for that. I can confirm you dont need to hardcode the group name there either, and use:
label_template: >
var i;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
return count.toString() + ' of ' + entities.length.toString();
this one uses layout: icon_name_state