what it does

A customisable button card for Home Assistant focused on entity status. State-based icons, colors, labels, and animations give you at-a-glance visibility of your devices.

state-based icon, color, label per entity
built-in defaults for lock, light, switch, cover, climate, media_player, alarm, and more
state pattern matching — exact, !=, numeric (>, >=, <, <=), and regex (~=) operators, plus a secondary: prefix; first match wins
per-state appearance overrides picked from the entity’s known states, with free-text fallback
transitional state animations (e.g. locking blink)
secondary entity support (e.g. door sensor paired with a lock)
configurable tap, double-tap, and hold actions via Home Assistant’s native action editor
camera reveal — slide cameras down from the button on a configured state, with per-camera aspect ratio, fit mode, and position
visual editor built on Home Assistant’s ha-form schema — matches the look of HA’s built-in card editors

install via HACS [recommended]

open HACS in your Home Assistant instance
Frontend → + Explore & Download Repositories
search for Status Button Card by akaDashe
download, restart Home Assistant

install manually

download status-button-card.js from the latest release
copy to config/www/status-button-card/
Settings → Dashboards → Resources → add as JavaScript Module (url: /local/status-button-card/status-button-card.js)

basic config

type: custom:status-button-card
entity: lock.front_door

with secondary entity + state overrides

type: custom:status-button-card
entity: lock.front_door
secondary_entity: binary_sensor.front_door_contact
name: Front Door
icon: mdi:door-closed-lock
show_name: true
show_label: true
state_appearances:
  - state: locked
    icon: mdi:lock
    label: Locked
    color: "rgba(46, 175, 80, 0.9)"
  - state: unlocked
    icon: mdi:lock-open
    label: Unlocked
    color: "rgba(244, 67, 54, 1)"
  - state: locking
    icon: mdi:lock-clock
    label: Locking...
    animate: true

state patterns

The state field matches more than exact values: =, !=, numeric > >= < <=, and regex ~=, plus a secondary: prefix to test the secondary entity. Rules run top-down and first match wins, so list specific patterns above broad ones.

type: custom:status-button-card
entity: sensor.living_room_temperature
state_appearances:
  - state: ">= 80"        # hottest band first — order is priority
    label: HOT
    color: "rgba(244, 67, 54, 1)"
  - state: ">= 65"
    label: COMFY
    color: "rgba(46, 175, 80, 0.9)"
  - state: "< 65"
    label: COLD
    color: "rgba(33, 150, 243, 1)"
  - state: "~= ^armed"    # regex: any armed_* state
    icon: mdi:shield-check

camera reveal per state

type: custom:status-button-card
entity: alarm_control_panel.home
state_appearances:
  - state: "~= ^armed"
    icon: mdi:shield-check
    cameras:
      - entity: camera.front_door
        aspect_ratio: 16/9
        object_fit: cover
        object_position: bottom