Thank you so much. It works and I have a great starting point to do other tests
Hi, the code is actually share a few posts above you.
and with RomRider’s added help.
If you assign a switch to the button, the behaviour is undefined for the variable. If you want to retrieve the color of your light, you’ll have to:
- Assign the switch as the entity of the button and build it yourself using the
rgb_colorattribute of your light entity - Assign the light to the button and use manually assign the name, icon etc to match your switch.
Maybe share your config so that I can understand better, because it’s still unclear to me 
What if you would like to have just 1 decimal instead of for example 2 provided by the sensor?
So in other words, a sensor gives you a state of “00.09” but you want to have it shown as “00.1”?
You can do like that for eg:
state_display: '[[[ return entity.state.toFixed(1) ]]]`
I tried the following, but it doesn’t seem to work:
label: ‘[[[ return [“sensor.inkomhal_multisensor_temperatuur”].state.toFixed(1) ]]]’
This way:
label: '[[[ return states["sensor.inkomhal_multisensor_temperatuur"].state.toFixed(1) ]]]'
Edit: The quotes were strange 
1 Like
Well, there’s no error anymore. But the whole line of code is now displayed as the label.
So instead of eg 5.2 it shows ‘[[[ return states[“sensor.inkomhal_multisensor_temperatuur”].state.toFixed(1) ]]]’
Any idea?
I’ve updated the post, the quotes where super strange, probably a copy paste issue from your editor to the forum
Thanks, but after trying that the following error is shown:
ButtonCardJSTemplateError: TypeError: states.sensor.inkomhal_multisensor_temperatuur.state.toFixed is not a function in ‘return states[“sensor.inkomhal_multisensor_temperatuur”].state.toFixed(1)’
That probably means your state is a string and not a float.
label: '[[[ return parseFloat(states["sensor.inkomhal_multisensor_temperatuur"].state).toFixed(1) ]]]'
1 Like
YES! Perfect, thank you!
Hi Rom,
finally… getting along to transforming my custom_fields: stateDisplay to the now core available state_display field (which I myself asked you to integrate ages ago…sorry for that)
having couple of basic questions, given the definition you put in the docs, stating that state_display ‘overrides’ the way the state is represented:
would my current:
- value: unavailable
custom_fields:
stateDisplay: >
[[[ return entity.state; ]]]
styles:
card:
- opacity: 0.6
- color: '#D3D3D3'
icon:
- color: '#D3D3D3'
custom_fields:
stateDisplay:
- color: '#D3D3D3'
be replaced with:
- value: unavailable
# state_display: >. ## should this be here, or can it be left out, because if no state_display is provided it takes the entity.state by default anyway?
# [[[ return entity.state; ]]]
styles:
card:
- opacity: 0.6
- color: '#D3D3D3'
icon:
- color: '#D3D3D3'
# custom_fields: ## <-- no longer necessary since state_display is styled by the regular `state:` styling? in this case in the `card:` setting
# state_display:
# - color: '#D3D3D3'
even when I do use a state_display for the other state values, like:
- operator: template
value: >
[[[ var id = entity.entity_id.split('.')[1];
var reachable = 'binary_sensor.' + id + '_reachable';
return states[reachable] && states[reachable].state == 'off'; ]]]
custom_fields:
stateDisplay: >
[[[ 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:
and, for the grids where I now use:
styles:
grid:
- grid-template-areas: '"i" "n" "stateDisplay" "l"'
can I simply use the default
styles:
grid:
- grid-template-areas: '"i" "n" "s" "l"'
or should I still use:
styles:
grid:
- grid-template-areas: '"i" "n" "state_display" "l"'
again, sorry if this seems so basic a question for a heavy button user like I am, its just that Id like to make the button-configs as simple as possible 
without making al kinds of new mistakes.
to cut it short: does the state_display: follow everything that is used for state:?
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
1 Like
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?