Looking for names of interface elements: Badge

Configuration
1

HI,

Where can we find documentation on the names of the interface parts in HA?
Im trying to customize a badge, and do so independently for the Top (badge) and the Bottom (label)

All i can find refers to both, label-badge-etc:

green_badge:
  label-badge-red: green
  label-badge-border-color: green
  label-badge-background-color: white
  label-badge-text-color: green

odd thing is the label-badge-text-color doesn’t change the white text in the label, only the badge…
would love to change the badge color independently from the label also.

All in all, i would hope both the Badge and the label have :

  • text-color
  • background-color
  • border-color

If not this would be transformed into a feature request :wink:

just found this to be the full ha-style https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.html and badge elements:

 /* for label-badge */
    --label-badge-background-color: white;
    --label-badge-text-color: rgb(76, 76, 76);
    --label-badge-red: #DF4C1E;
    --label-badge-blue: #039be5;
    --label-badge-green: #0DA035;
    --label-badge-yellow: #f4b400;
    --label-badge-grey: var(--paper-grey-500);

not clear yet is what the elements label-badge-blue, label-badge-green, label-badge-yellow and label-badge-grey refer to. label-badge-red (shouldn’t if have been just label-badge?) now set the full label?

Cheers,
Marius

1 Like