Home Assistant Badges

Note: Please, be aware that this post may contain affiliate links.

Screengrab of one of the Home Assistant Badges

Home Assistant Badges are the little circular icons at the top of the page with sensor values inside them. They can be easy to add/manage if you are used to the UI, and used to Home Assistant. However, if you’re not used to the system, it can be very confusing – that’s where this article comes in.

I’m going to go through the basic way to set up the badges. You could also set up badges in Lovelace via a code editor, but I won’t be covering that method here.

If you do want to know more about Home Assistant Badges then you can just go to the official feature page and view that.

Note that badges do not show when view is in panel mode.

Home Assistant documentation on views

4 Simple Steps To Success!

screengrab of the top right of the corner of the web page. It shows the configure U.I. dialog box that pops up under the mouse when one clicks the burger menu in the top right corner of the page. Below the pop-up there are several badges visible within Lovelace

Step 1: while you are in the Home Assistant web interface, you will see 3 vertical dots representing the menu. Click that and choose “Configure UI

Screengrab of the top left corner of the web page. Also in the image at the top left of it is a cross that is to be clickedto save the view after it has been edited

Step 2: Click the edit/pencil icon next to the icon for the view that you want the badges to appear on

Screengrab showing the pop up that appears once the edit icon is clicked. The middle tab is titles Badges and is in focus. The contents of the tab are a series of Select form fields stavked vertically. Each select form field can be used to choose a Home Assistant Badge

Step 3: Once you click the pencil/edit icon you will see something like this box pop-up.

There are 3 tabs along the top: select the middle tab “BADGES

You can now add as many badges as you wish. All the entities that appear when you click the “Entity” form field are entities that will make valid badges, so there is no need for you to worry about that

Once you have selected all of the badges that you want – simply select the “SAVE” button at the bottom-right of the form/pop-up

Screengrab of the top left corner of the web page. Also in the image at the top left of it is a cross that is to be clickedto save the view after it has been edited

Step 4: Once you have saved the form and you see your shiny new Home Assistant Badges, please, don’t forget to click on the “X” (shown here to the left of the word “Server”). If you fail to do this, there is a chance that your new config won’t save and you will have to redo the steps outlined here.

Now although that won’t do the number of views this post gets any harm, it might frustrate you a little.

Well, that’s it, Folks! Please try some of my other posts if you’re still hungry. For example, if you are interested in Lovelace and the Home Assistant, then why not check out the other posts in the Lovelace category

Don’t forget to tip your waitress.

Grandadevans

I am a disabled veteran of 3 tours of Iraq and a tour of Afghanistan as part of the British Army. No longer able to work as I have to lay down on a sofa-bed in my living room 20-ish hours a day. I'm hoping to be able to make a living blogging about my Home Automation /Smart Home journey and maybe regain some dignity in life.

5 thoughts on “Home Assistant Badges

  • July 4, 2019 at 15:40
    Permalink

    great, where and how did you set the friendly name of the badge ?

    Reply
    • December 28, 2019 at 00:59
      Permalink

      Hey, Mark. so sorry to take nearly 7 months to reply to you. Hopefully, you got this sorted, but if not you could take a look at the badge docs at https://www.home-assistant.io/lovelace/views/#badges
      There’s an example on that page that shows how to set name and icon etc.
      Sorry again for the delay,
      John

      Reply
  • December 27, 2019 at 16:12
    Permalink

    great tip! is there a way to control the badge border color?

    Reply
    • December 28, 2019 at 01:02
      Permalink

      Hey, Tony
      I’ve just had a play around with a few things and although I can get the style edited in the browser, as it’s in an iframe etc I am not sure how to do it, so just contacting Thomas Lovén, who may know. I’ll let you know what happens.
      John

      Reply

Leave a Reply

%d bloggers like this: