https://github.com/thomasloven/lovelace-badge-card

🔹 Place badges anywhere in the lovelace layout
https://github.com/thomasloven/lovelace-badge-card

home-assistant

Last synced: 2 months ago
JSON representation

🔹 Place badges anywhere in the lovelace layout

• Host: GitHub
• URL: https://github.com/thomasloven/lovelace-badge-card
• Owner: thomasloven
• License: mit
• Created: 2020-07-21T16:49:22.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-08-12T18:38:59.000Z (9 months ago)
• Last Synced: 2025-02-06T15:17:52.334Z (3 months ago)
• Topics: home-assistant
• Language: JavaScript
• Homepage:
• Size: 80.1 KB
• Stars: 85
• Watchers: 7
• Forks: 14
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# badge-card

[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs)

Place [badges](https://www.home-assistant.io/lovelace/dashboards-and-views/#state-label-badge) anywhere you'd like - not just at the top of the view, and even in panel-mode views.

.

For installation instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).

## Usage

Add `badge-card` as a card in lovelace, and specify the badges just as you would in the [veiw configuration](https://www.home-assistant.io/lovelace/dashboards-and-views/#state-label-badge):

```yaml

views:

  - title: Test view

    # View badges

    badges:

      - entity: binary_sensor.updater

      - entity: binary_sensor.basement_floor_wet

      - entity: binary_sensor.movement_backyard

      - entity: mailbox.demomailbox

      - entity: sensor.outside_temperature

      - entity: sensor.outside_humidity

      - entity: sun.sun

    cards:

      - type: entities

        entities:

          - light.bed_light

          - light.ceiling_lights

          - light.kitchen_lights

      # Badge-card

      - type: custom:badge-card

        badges:

          - entity: binary_sensor.updater

          - entity: binary_sensor.basement_floor_wet

          - entity: binary_sensor.movement_backyard

          - entity: mailbox.demomailbox

          - entity: sensor.outside_temperature

          - entity: sensor.outside_humidity

          - entity: sun.sun

```

![demo screenshot](https://user-images.githubusercontent.com/1299821/88083113-f122d400-cb82-11ea-8239-b5e38674ab14.png)

### Bonus feature

`badge-card` works with entity-filter (or [auto-entities](https://github.com/thomasloven/lovelace-auto-entities)); the following example shows a badge for each light that is turned on:

```yaml

type: entity-filter

entities:

  - light.bed_light

  - light.ceiling_lights

  - light.kitchen_lights

state_filter:

  - "on"

card:

  type: custom:badge-card

```

### Design process

On a whim, I decided to livestream how I made this card.

If you want to see me stuttering through it in a blurred video, it's here:

[![Development video](https://img.youtube.com/vi/SwI8zHLP-EU/0.jpg)](https://www.youtube.com/watch?v=SwI8zHLP-EU)

---