Thank you for a good idea, here added a couple of examples (+ added a link here).
Badges: conditional display:
Example 1 - toggle “Show / Hide badge”:
- title: badge
path: badge
badges:
- entity: sensor.cleargrass_1_co2
name: conditional
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
display: inline-block;
{% else %}
display: none;
{% endif %}
}
cards:
- type: entities
entities:
- entity: input_boolean.test_boolean
name: Show badge
Example 2 - show a badge if the sensor is available:
- entity: sensor.cleargrass_1_co2
name: display if available
style: |
:host {
{% if states(config.entity) in ['unavailable','unknown'] -%}
display: none;
{% else %}
display: inline-block;
{% endif %}
}
… one more styling:
Badges: hidden name:
- entity: sensor.cleargrass_1_co2
name: transparent color
style: |
:host {
color: transparent;
}
Update 17.08.23: this fix may not be needed since there is a PR to implement the “show_name” option which is not working this moment.
More examples are described here.