How to use state-badge visual with state-label?

[Guesch]

Greetings,

Please let me start by saying I did try to find the answer on the internet but miserably failed

I have state-label elements that do exactly what I want.
i.e. show the attribute “current temperature” of my climate sensor and open the climate UI upon tapping on them:

This would be perfect except for the visual… They are displayed as row number with a square background, which is not the prettiest thing ever…

On the other hand, the visual of “state-badge” is brillant… Round visual, with the unit displayed and the value inside… Except that I cannot select the attribute being displayed (It shows “Auto” while I would want to display “current temperature”)

My question is:

• Is there anyway to change the attribute displayed by the state-badge element?
• If state-label is the only way of bringing this interface AND displaying the current temperature, is there anyway to change its visual to match the state-badge’s one?
• (or any other way to achieve what I’m trying to achieve…)

Thank you in advance for any help you could provide!!

here is the code for one of the element:

type: state-label
entity: climate.salon
attribute: current_temperature
suffix: °
style:
  left: 20%
  top: 30%
  scale: 200%
card_mod:
  style: |
    {% set temp = states('sensor.salon_io_2895510_2_temperature')|float(0)
    %}
    {% if temp <= 17 %} 
      div{
        color: blue;
        background-color: white;
        }
    {% elif temp <= 22 %}
      div{
        color: green;
        background-color: white;
        }
    {% elif temp <= 28 %}
     div{
        color: red;
        background-color: white;
        }
    {% endif %}
    ;