Animated Lovelace badge to draw attention to critical alerts (smoke, water leaks, storms, alarms).

KB Alert Badge is a custom Home Assistant Dashboard badge that animates to highlight critical or time-sensitive conditions.

• Type: custom:kb-alert-badge
• Works with any entity
• Activation: when state indicates an alert (e.g. "on", "alarm", or a problem state)
• Minimum Home Assistant version: 2024.12

• Visual editor for all main options
• Multiple animations: flashing, police, water, storm, shake, washing-machine
• Color and icon customization
• Animation speed control

KB Alert Badge can be installed via HACS.

1. Install HACS if you don't have it already.
2. Open HACS in Home Assistant → Frontend.
3. Search for "KB Alert Badge" (or add as a custom repository if not listed yet).
4. Download/Install.
5. Add a Dashboard resource:
   • URL: /hacsfiles/kb-alert-badge/kb-alert-badge.js
   • Type: module

1. Download kb-alert-badge.js from the latest release.
2. Copy it to your config/www directory.
3. Add a Dashboard resource:
   • URL: /local/kb-alert-badge.js
   • Type: module

type: custom:kb-alert-badge
entity: binary_sensor.smoke_alarm
animation: police # flashing | police | water | storm | shake | washing-machine
color: red
icon: mdi:smoke-detector
speed: 900

• entity: Entity to monitor
• animation: One of flashing, police, water, storm, shake, washing-machine
• color: Any valid CSS color
• icon: MDI icon (e.g. mdi:smoke-detector) or template
• speed: Animation speed in milliseconds

• General: When active, the badge icon color is driven by --kb-alert-color (your color). speed maps to --kb-alert-speed.
• flashing: Uses color for the pulse background and outer glow; text becomes white for contrast.
• police: Right side uses your color; left side auto-uses its complementary hue. If color is not set, defaults are blue/right and red/left.
• water: Both wave layers use your color (the back wave is a darker mix), rendered under the content.
• storm: Uses your color as the base lightning/rain highlight color; lighter/darker flashes are derived automatically.
• shake: Only motion is applied; color just colors the icon.
• washing-machine: Spinner artwork does not use color; only speed influences door/rotation.

If your setup allows styling custom elements (e.g., via card-mod), you can override the CSS variables used by the badge:

• --kb-alert-color: base alert color
• --kb-alert-speed: animation speed
• --kb-police-right / --kb-police-left: police side colors (override the auto-computed/complementary pair)
• --kb-storm-color: base storm flash/rain highlight color

Example (with card-mod):

type: custom:kb-alert-badge
entity: binary_sensor.alarm
animation: police
card_mod:
  style: |
    kb-alert-badge {
      --kb-alert-color: #00aaff;
      --kb-police-right: #00aaff;  # force right
      --kb-police-left: #ff0033;   # force left
      --kb-alert-speed: 800ms;
    }

A visual editor is provided with controls for entity, animation, color, icon, and speed.

1. Ensure Home Assistant is up to date (some features may require newer versions).
2. Confirm the resource is loaded (check browser devtools console for errors).
3. If you used HACS, verify you have the latest version installed.
4. Clear your cache and force reload:
   • Remove the resource (https://my.home-assistant.io/redirect/lovelace_resources/)
   • Uninstall from HACS
   • Reinstall from HACS

• Heavily inspired by the structure and UX of Mushroom.
• Washing machine animation based on CodePen by qxuken.
• Storm animation based on CodePen by mephysto.
• Police animation based on CodePen by drew_mc.

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind are welcome!

Contributions are welcome! Please open an issue or pull request. This project uses Conventional Commits and semantic-release.

MIT © kibibit

If you like this project, consider starring the repo and checking out other work from the kibibit organization.