Skip to content

Alarm Chip

Description

example-image

Alarm chip that displays alarm armed and disarmed state with colored icon.

Variables

Variable Default Required Notes
entity entity of your alarm_control_panel

Usage

- type: 'custom:button-card'
  template: chip_alarm
  entity: alarm_control_panel.alarm
Template Code
chip_alarm.yaml
---
### chip_alarm ###
chip_alarm:
  template:
    - "chip_icon_label"
    - "ulm_translation_engine"
  label: "[[[ return variables.ulm_translation_state ]]]"
  icon: |
    [[[
      var state = entity.state.toLowerCase();
      var alarm_icon = {
        "default": "mdi:shield-outline",
        "armed_home": "mdi:shield-home",
        "armed_away": "mdi:shield-lock",
        "armed_night": "mdi:shield-moon",
        "disarmed": "mdi:shield-off",
        "arming": "mdi:shield",
        "triggered": "mdi:shield-alert"
      }
      return (alarm_icon[state] || alarm_icon["default"]);
    ]]]
  styles:
    icon:
      - color: |
          [[[
            var state = entity.state.toLowerCase();
            var alarm_color = {
              "default": "var(--google-yellow)",
              "armed_home": "var(--google-red)",
              "armed_away": "var(--google-red)",
              "armed_night": "var(--google-red)",
              "disarmed": "var(--google-green)",
              "arming": "var(--google-yellow)",
              "triggered": "var(--google-red)"
            }
            return (alarm_color[state] || alarm_color["default"]);
          ]]]