Home Assistant Badges
Note: Please, be aware that this post may contain affiliate links.
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 Home Assistant & its interface. 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!
Step 1: while you are in the Home Assistant web interface, you will see 3 vertical dots representing the menu.
Click the dots and choose “Configure UI“
Step 2: Click the edit/pencil icon next to the icon for the view that you want the badges to appear on
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“
(if you are using a version less than 0.107, there will only be 2 tabs, you want the second)
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
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.
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 Home Assistant, then why not check out the other posts in the Lovelace category
Don’t forget to tip your waitress.
great, where and how did you set the friendly name of the badge ?
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
great tip! is there a way to control the badge border color?
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
Hi, Tony,
Thomas Lovénhas updated his lovelace-card-mod plugin to now be able to style badge borders.
You can find the relavent part of the plugin at https://github.com/thomasloven/lovelace-card-mod#styling-badges
If you need any more help using the plugin, then just let me know.
John