How To Create a Lovelace Battery State Card in Home Assistant

In this guide, I’m going to show you how to create a simple battery level and battery state card in Home Assistant in 2021. To do this, we are using a popular HACS integration called Battery State Card.

This card is very customizable. You can change the color of each icon depending on the state it’s in (For example, red when 0%, orange at 10%, and green at 100%). Or, you can set it to display levels in a gradient. The card will then show battery levels from all of the entities you have added to the Lovelace card in Home Assistant.

You could also use this card to display the charging state indicators (like ‘charging’) or display attributes in a secondary_info line, if you’d like.

The documentation is excellent on the Github page, so I won’t go into too much detail on how to configure the cards. I have included my example cards with screenshots below. You can just download the card via HACS, copy my YAML, and replace with your own entity ID’s.

---

Install Battery State Card

Open HACS from your Home Assistant sidebar. Click Frontend. In the bottom right corner, click Explore and Add Repositories and search for “battery state card“.

Then, Install this Repository in HACS.

Find Battery Level Entities

After the integration has been installed, you need to figure out the entity names for each of your battery sensors. The easiest way to find most of them is by going to Configuration > Entities and searching for “battery” and “power”.

Not all of entities will have the word battery or power in them, so you might have to manually search for the device under the “Devices” tab and view the different entity names.

---

Create Battery State Card in Lovelace

Now that you have a list of all of your battery entities, I recommend opening a new Home Assistant tab in your browser. This will make it easier to copy/paste entity names back and forth.

Click into one of your dashboards and add a new card. Add a Manual card.

---

Color Gradient Card

Copy and paste this into a manual card. Then, just replace the entity ID and names with your own. This card will also let you tap one of the entities to view more info/history of the battery or power level.

type: custom:battery-state-card
title: Color Gradient
color_gradient:
  - '#ff0000'
  - '#ffff00'
  - '#00ff00'
entities:
  - entity: sensor.ecolink_z_wave_plus_firefighter_battery_level
    name: Ecolink Smoke/CO2 Listener
    tap_action: more-info
  - entity: sensor.pixel_3_wife_battery_level
    name: Wife's phone
    tap_action: more-info
  - entity: sensor.pixel_5_danny_battery_level
    name: My phone
    tap_action: more-info
  - entity: sensor.touchscreen_deadbolt_battery_level
    name: Patio Smartlock
    tap_action: more-info
  - entity: sensor.touchpad_electronic_deadbolt_battery_level
    name: Frontdoor Smartlock
    tap_action: more-info
  - entity: sensor.water_sensor_power
    name: Kitchen Leak Sensor
    tap_action: more-info

---

Sorted Battery List & Collapsed View

Since I have a lot of devices with batteries, I prefer not having one giant card (like the gradient card). I would much rather only see entities with low battery levels in a Lovelace card and then have a dropdown to view battery levels of everything else.

The two sorted and collapsible card will show the lowest battery devices at the top and is configured to show the 4 lowest-battery devices.

---

Sorted Battery Card: Default values

The card config below will define a tap_action: more-info for every battery entity and is set to only show 4 batteries above the collapsible fold. It will also pull the entity name from the entity itself.

type: custom:battery-state-card
title: 'Battery State Card: Sorted'
tap_action: more-info
sort_by_level: asc
collapse: 4
entities:
  - sensor.ecolink_z_wave_plus_firefighter_battery_level
  - sensor.pixel_3_wife_battery_level
  - sensor.pixel_5_danny_battery_level
  - sensor.touchscreen_deadbolt_battery_level
  - sensor.touchpad_electronic_deadbolt_battery_level
  - sensor.water_sensor_power
  - sensor.lumi_lumi_sensor_wleak_aq1_power
  - sensor.hue_motion_power
  - binary_sensor.lumi_lumi_sensor_magnet_aq2_on_off
  - sensor.front_door_sensor_power
  - sensor.button_power

---

Sorted Battery Card: Friendly names & custom tap actions per device

This is the card format I’m using.

It’s basically the same as the card above, except instead of using the default entity names, I am giving them friendly names by adding entity: before the sensor name. I am also adding a tap_action: more-info to just one battery, and for the “My Phone” entity – I am having it open to a different Lovelace view when tapped.

You can look through the various tap and hold actions here: https://www.home-assistant.io/lovelace/actions/

type: custom:battery-state-card
title: 'Sorted, Collapsed: Custom per device'
sort_by_level: asc
collapse: 4
entities:
  - sensor.ecolink_z_wave_plus_firefighter_battery_level
  - entity: sensor.pixel_3_wife_battery_level
    name: Wife's Phone
    tap_action: more-info
  - entity: sensor.pixel_5_danny_battery_level
    name: My Phone
    tap_action:
      action: navigate
      navigation_path: /lovelace/calendar
  - entity: sensor.touchscreen_deadbolt_battery_level
    name: Frontdoor Lock
    tap_action: more-info
  - entity: sensor.touchpad_electronic_deadbolt_battery_level
    name: Patio Lock
    tap_action: more-info
  - entity: sensor.water_sensor_power
    name: Kitchen Leak
    tap_action: more-info
  - entity: sensor.lumi_lumi_sensor_wleak_aq1_power
    name: Master Bath Leak
    tap_action: more-info

---

Wrapping Up

Hopefully my Battery State Card guide helps you stay on top of which devices have low batteries!

You can optionally import a blueprint to receive notifications when a battery level reaches a certain threshold, but, that’s a little more effort than I want to put into this project. Considering I open Home Assistant multiple times a day, I will definitely see which devices are low on power without needing to get alerted or receive push notifications.

You might also find my Home Assistant Garbage Collection Reminder guide helpful.