If state_display is not provided, the default behavior applies.
state_display's grid area is s, like the default state.
For your states templates, youâll have to remove your custom_field and put your code in state_display:
Edit: This ^^^ was wrong, youâll have to put everything in the main state_display
thanks for confirming, will have a rewrite day today now 
not to re-iterate on this, but why was it again you were opposed to allowing templates in the state: field, and yet this state_display: field does just that in fact? since it defaults to state: if not provided?
state: is not a configuration option in button-card 
hmm, we cross posted. Im not sure I understand the difference hereâŚ
for
- value: unavailable
custom_fields:
stateDisplay: >
[[[ return entity.state; ]]]
what does it mean?
just remove the custom_field and it will display the state (provided you have show_state: true)
yeah, figured that out
still cant make it happen:
button_light_outdoors:
template:
- action_default
- config_no_temp
- last_changed
- main_config
- styles_cg
- styles_img_cell
- styles_name_left
- styles_state
custom_fields:
info: *info_light
styles:
custom_fields:
info:
- position: absolute
- right: 5%
- top: 10%
- width: 30%
card:
- background-color: '#1675C9'
state:
- operator: template
value: >
[[[ var id = entity.entity_id.split('.')[1];
var reachable = 'binary_sensor.' + id + '_reachable';
return states[reachable] && states[reachable].state == 'off'; ]]]
state_display: >
[[[ var fakestate = `<span style="color: grey;"> ${entity.state}:</span>`;
var fakelabel = `<span style="color: grey;"> ${Math.round(entity.attributes.brightness/2.55)} %</span>`;
return 'Unrch: ' + fakestate +' ' + fakelabel; ]]]
styles:
state_display:
- color: steelblue
card:
- background-color: lightgrey
- color: grey
name:
- color: steelblue
- value: 'on'
state_display: >
[[[ var fakestate = `<span style="color: var(--active-color);"> ${entity.state}:</span>`;
var fakelabel = `<span style="color: var(--active-color);"> ${Math.round(entity.attributes.brightness/2.55)} %</span>`;
return fakestate +' ' + fakelabel; ]]]
styles:
card:
- color: var(--active-color)
label:
- color: black
name:
- color: black
shows only the state,
and not the state_display
what didnt I replace correctly?
update
this seems to work, directly in the main config section of the button:
state_display: >
[[[ var fakestate = `<span style="color: var(--active-color);"> ${entity.state}:</span>`;
var fakelabel = `<span style="color: var(--active-color);"> ${Math.round(entity.attributes.brightness/2.55)} %</span>`;
return (entity.state == 'on') ? fakestate + ' ' + fakelabel : entity.state; ]]]
but I now dont have a
state:
- operator: template
nor
state:
- value: unavailable
which I also need.
Is this simply a matter of the state_display not being available under the state: options?
Hi @RomRider, I wonder if itâs possible what Iâm trying to do. I have a template configuration setup (which works great). Now I want to move over popup-cards using browser-mod (instead of global settings, inside each button through call-service). So I have all entities (future and past) use the popup card (in combination with auto-entities and grid card).
The problem Iâm facing now is that I need the template to also fill in the popup part the of code with the same entity. I also use decluttering card for other stuff, which has the option to use [[entity]], this works great with nested cards. I miss this function with the template option of button-card.
This is the hold_action part the the configuration template which has the nested cards.
hold_action:
action: call-service
haptic: heavy
service: browser_mod.popup
service_data:
title: " "
card:
actions:
- color: '#9900FF'
service: light.turn_on
service_data:
entity_id: this.entity_id
rgb_color:
- 128
- 0
- 255
- color: '#FFA500'
service: light.turn_on
service_data:
entity_id: this.entity_id
kelvin: 1000
- color: '#FFF1D6'
service: light.turn_on
service_data:
entity_id: this.entity_id
kelvin: 3600
- color: '#FF2212'
service: light.turn_on
service_data:
entity_id: this.entity_id
rgb_color:
- 255
- 0
- 0
actionsInARow: 4
borderRadius: 30px
brightnessHeight: 400px
brightnessWidth: 150px
entity: this.entity_id
fullscreen: true
icon: 'mdi:'
settings:
closeButton: Sluiten
openButton: Instellingen
settingsCard:
type: 'custom:light-entity-card'
cardOptions:
entity: this.entity_id
shorten_cards: false
consolidate_entities: true
color_wheel: true
persist_features: false
brightness: true
color_temp: true
white_value: true
color_picker: true
smooth_color_wheel: true
hide_header: false
child_card: false
show_slider_percent: true
full_width_sliders: false
brightness_icon: weather-sunny
white_icon: file-word-box
temperature_icon: thermometer
header: ''
effects_list: true
style: |
ha-card {
box-shadow: none;
background: none;
sliderThumbColor: var(--light-accent-color)
switchHeight: 400px
switchWidth: 150px
type: 'custom:light-popup-card'
deviceID: this
style: !include /config/templates/popup/popup-sliders-style.yaml
I tried using this.entity_id but that doesnât work (I think this is not a core feature, but something of auto-entities). Is it at all possible to use nested cards inside a configuration template and passon the same entity? The pop-up does open, but itâs empty. I think because it canât find an entity.
Edit: for the time being I tried this using decluttering-card and made button-card templates as variables within decluttering card. Works great (also with auto-entities and grid card) 
I created a template file that loads the custom templates (many copied from examples above). I did a config check and no errors. When I point to the template, no matter which one, I get for example; Button-card template âstandardâ is missing! Not sure what to look for. I have a spit config, and load the templates via the package documentation.
Example of the start of the yaml file.
button_card_templates:
standard:
color_type: card
size: 80%
hold_action:
action: more-info
styles:
card:
- padding: 0.2em
- '--mdc-ripple-color': yellow
- '--mdc-ripple-press-opacity': 0.5
icon:
- opacity: 0.5
name:
- font-size: 0.65em
- white-space: normal
state:
- font-size: 0.65em
- white-space: normal
label:
- font-size: 0.4em
- white-space: normal
wide:
template: standard
styles:
grid:
- position: relative
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
#=========================
#----- Container Button Card
#=========================
#Container Button
#button_card_templates:
container:
color_type: label-card
color: dimgray
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: 'rgba(0,0,0,0.3)'
- margin: 0
Example of the lovelace card that is failing
-
type: custom:button-card
template: standard
#<--- containing several other nested button card templates
entity: binary_sensor.ha_update_available
icon: mdi:home-assistant
name: Home Assistant
show_state: false
tap_action:
action: more-info
entity: sensor.ha_available_version
hold_action:
action: url
url_path: https://www.home-assistant.io/latest-release-notes/
styles:
card:
- font-size: 10px
grid:
- grid-template-areas: '"i i" "n n" "available available" "local local"'
icon:
- color: >
[[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
- width: 30%
- animation: >
[[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
custom_fields:
available:
- align-self: start
- justify-self: start
- --text-color-sensor: >
[[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
- --animation: >
[[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
local:
- align-self: start
- justify-self: start
custom_fields:
available: >
[[[ return `<span>Avail: </span> <span style='color: var(--text-color-sensor);animation: var(--animation)'>${states['sensor.ha_available_version'].state}</span>`; ]]]
local: >
[[[ return `<span>Local: <span style='color: grey;'>${states['sensor.ha_local_version'].state}</span></span>`; ]]]
Example of from others that are helping me understand, but I am missing something (still). Does each button card template need to be in a sperate file?
Where did you save the templates?
Hi,
I am trying to add a link (to navigate back to the main view) to a custom field that is just an icon. It already looks exactly how I want it, but I canât figure out how to add the link.
type: 'custom:button-card'
name: The Den
color_type: label-card
color: 'rgb(83,38,6)'
styles:
name:
- font-weight: bold
grid:
- position: relative
custom_fields:
test:
- position: absolute
- left: 5%
custom_fields:
test: |
<ha-icon icon="mdi:chevron-left-circle"
style="width: 30px; height: 30px; color: white;"></ha-icon>
Thank you for any help!
You canât trigger an action from a custom field, youâll have to embed a card in your custom field with the action on it (it can be a button-card) or assign the action to the main button-card.
Ah OK. Thank you!
I tried that too, but then I had to define the color twice, so that you canât see the embedded card. Is there a way to make the embedded card transparent? Would make the templates easier.
Thanks again.
Thereâs always a way, if you share your config (with the embedded card)
Fair enough
type: 'custom:button-card'
name: The Den
color_type: label-card
color: 'rgb(83,38,6)'
styles:
name:
- font-weight: bold
grid:
- position: relative
custom_fields:
arrow_back:
- position: absolute
- left: 5%
custom_fields:
arrow_back:
card:
type: 'custom:button-card'
icon: 'mdi:chevron-left-circle'
size: 30px
color_type: card
color: 'rgb(83,38,6)'
tap_action:
action: navigate
navigation_path: /lovelace/
Oh, I could probably use one of those var(something) variables, if I knew how to define them myself.
Thank you again. For the card and for being so helpful.
Something like this should do the trick:
type: 'custom:button-card'
name: The Den
color_type: label-card
color: 'rgb(83,38,6)'
styles:
name:
- font-weight: bold
grid:
- position: relative
custom_fields:
arrow_back:
- position: absolute
- left: 5%
custom_fields:
arrow_back:
card:
type: 'custom:button-card'
icon: 'mdi:chevron-left-circle'
size: 30px
color_type: card
styles:
card:
- background: none
- box-shadow: none
- border-radius: 0px
tap_action:
action: navigate
navigation_path: /lovelace/
Hi All,
Could someone please assist with the changes i require to make these buttons have rounded edges? Thank in advance.
' - type: horizontal-stack
cards:
- type: button
tap_action:
action: toggle
entity: script.atv_lounge_on
icon: 'hass:power'
icon_height: 40px
name: 'On'
- type: button
tap_action:
action: toggle
entity: script.atv_lounge_off
icon: 'hass:power'
name: 'Off'
icon_height: 40px
- cards:
- entity: remote.lounge
hold_action:
action: none
icon: 'mdi:arrow-left'
name: Left
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: left
entity_id: remote.lounge
type: button
- entity: remote.lounge
hold_action:
action: none
icon: 'mdi:apple'
name: Enter
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: select
entity_id: remote.lounge
type: button
- entity: remote.lounge
hold_action:
action: none
icon: 'mdi:arrow-right'
name: Right
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: right
entity_id: remote.lounge
type: button
type: horizontal-stack
- cards:
- entity: remote.lounge
hold_action:
action: none
icon: 'mdi:arrow-up'
name: Up
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: up
entity_id: remote.lounge
type: button
- entity: remote.lounge
hold_action:
action: none
icon: 'mdi:menu'
name: Menu
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: menu
entity_id: remote.lounge
type: button
- entity: remote.lounge
hold_action:
action: none
icon: 'mdi:arrow-down'
name: Down
show_icon: true
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
command: down
entity_id: remote.lounge
type: button
type: horizontal-stack
- type: horizontal-stack
cards:
- type: button
tap_action:
action: call-service
service: script.lounge_volume_up
name: Vol Up
icon: 'mdi:volume-plus'
icon_height: 55px
show_name: false
- type: button
tap_action:
action: call-service
service: script.lounge_volume_down
name: Vol Down
icon: 'mdi:volume-minus'
icon_height: 55px
show_name: false'You are not using button-card but the default button from home-assistant. This thread is about the custom button-card from here. So you have to install the custom-card first.
Then once installed and once your type: button changed to type: custom:button-card:
More round
styles:
card:
- border-radius: 25px # change the number here
If you want them to be circles:
styles:
card:
- border-radius: 50%
Can the card size be made round similar to the badge size? I am not seeing how from the documentation.
Just check the post above yours ^^ 
I understood the circle. I didnât understand how to make it that small.
Is what I am trying to replace. When they changed the naming of the OS / supervisor, etc it no longer fits in the badge. I used this as a glance to see if I needed to apply an update.