Badges in Home Assistant’s Lovelace

my badge in the UI
My Badge

When you make the switch over to Lovelace, one of the things that you may miss are the Home Assistant “badges”, these are the little round status icons at the top of the page giving you a quick representation of your sensors and other entities.

You may be surprised to hear that they are still available in Lovelace. You can even have your sensors in groups and still have them appear as badges, something I’m not sure was possible in the default home/overview.

All you need to do is add a few lines of code: at the same level of indentation as the id; title; type add the line

badges

Then simply add a list of the entities you want badges for. So for example, let’s start with this badgeless Lovelace interface…

image of the Lovelace UI without any badges
Lovelace without badges

…which has the code…

views:
  - id: Home
    view: true
    icon: mdi:home
    name: "Home"
    cards:
      - id: cardNumberOne

All we need to do to add some badges in Home Assistant to the Lovelace UI, to give us…

lovelace UI with badges attached
Arrr, that looks better

…is add the code…

    badges:
      - alarm_control_panel.home_alarm
      - device_tracker.5848227e2606
      - device_tracker.ac5f3eb525db
      - device_tracker.d4206d9f8b05
      - sensor.battery_levels_john_mobile_z5
      - sensor.battery_levels_john_mobile_z1
      - sensor.battery_levels_john_mobile_l1
      - sensor.fastcom_download
      - binary_sensor.rain
      - sensor.pws_feelslike_c
      - sensor.subscribers
      - sensor.this_weeks_bin

The start of the lovelace.yaml file now looks like this

views:
  - id: Home
    view: true
    icon: mdi:home
    name: "Home"
    badges:
      - alarm_control_panel.home_alarm
      - device_tracker.5848227e2606
      - device_tracker.ac5f3eb525db
      - device_tracker.d4206d9f8b05
      - sensor.battery_levels_john_mobile_z5
      - sensor.battery_levels_john_mobile_z1
      - sensor.battery_levels_john_mobile_l1
      - sensor.fastcom_download
      - binary_sensor.rain
      - sensor.pws_feelslike_c
      - sensor.subscribers
      - sensor.this_weeks_bin
    cards:
      - id: cardNumberOne

Just remember to refresh the Lovelace UI, in order to bring the new configuration in.

That’s it! How did you get on? Are Home Assistant Lovelace Badges something you were aware of? or is it something you didn’t know was possible?

Let me know any comments; questions or queries below.

I’ll try and get some more video to you soon, now that I have a semi-secent internet connection again.

Videos coming up are:

  • Amazon Echo (gen 3)
    • Comparison of gen 2 and gen 3How to set up multiple EchosHow to use multiple Amazon Echos in Home Assistant
  • 3rd in “Auth” series
    • Long lived access tokens

If you don’t like any of these ideas then you can always tell me what videos you want me to do.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.