Light Button Card

A custom Lovelace card for Home Assistant that combines a button entity (for toggling) with a binary sensor entity (for status display). Perfect for controlling lights or other devices via PLC relays.

Features

Button Toggle: Click the card to send a toggle command to your button entity
Status Display: Shows the current state from your binary sensor entity
Custom Icons: Support for custom icons with separate icons for on/off states
Visual Feedback: Status indicator dot and icon color changes based on state
Card Editor: Full UI editor support in Lovelace

Installation

Manual Installation

Copy dist/light-button-card.js to your www/community/light-button-card/ directory in Home Assistant
Add the resource to your Lovelace configuration:

resources:
  - url: /local/light-button-card/light-button-card.js
    type: module

HACS Installation (if published)

Go to HACS → Frontend
Click the three dots menu → Custom repositories
Add this repository
Install "Light Button Card"
Refresh your browser

Configuration

Basic Configuration

type: custom:light-button-card
button_entity: button.plc_light_1
binary_sensor_entity: binary_sensor.plc_light_1_status

Full Configuration Options

type: custom:light-button-card
button_entity: button.plc_light_1          # Required: Button entity to toggle
binary_sensor_entity: binary_sensor.plc_light_1_status  # Required: Binary sensor for status
name: Living Room Light                     # Optional: Display name
icon: mdi:lightbulb                         # Optional: Default icon (MDI format)
icon_on: mdi:lightbulb                      # Optional: Icon when state is "on"
icon_off: mdi:lightbulb-outline             # Optional: Icon when state is "off"
show_name: true                             # Optional: Show/hide name (default: true)

Icon Configuration

Icons use Material Design Icons (MDI) format. You can use any icon from Material Design Icons.

Examples:

mdi:lightbulb - Light bulb
mdi:lightbulb-outline - Light bulb outline
mdi:lamp - Lamp
mdi:ceiling-light - Ceiling light
mdi:wall-sconce - Wall sconce

Usage Example

type: custom:light-button-card
button_entity: button.plc_kitchen_light
binary_sensor_entity: binary_sensor.plc_kitchen_light_status
name: Kitchen Light
icon_on: mdi:lightbulb
icon_off: mdi:lightbulb-outline
show_name: true

How It Works

Button Entity: When you click the card, it calls button.press service on the specified button entity, which sends a command to your PLC to toggle the relay.
Binary Sensor Entity: The card continuously monitors the binary sensor entity to display the current state (on/off) of the PLC output.
Visual Feedback:
- The icon changes color and style based on the state
- A status indicator dot shows green when on, gray when off
- The state text displays the current state

Development

Building

npm install
npm run build

The compiled file will be in dist/light-button-card.js.

Development Mode

npm run watch

Requirements

Home Assistant 2023.1.0 or later
Button entity (for toggling)
Binary sensor entity (for status)

License

MIT

3.3 KiB Raw Blame History