Skip to content

Vertical Button Card

Description

example-image

Card card_vertical_button can be used in different ways. The primary usage is to switch between scenes or toggle a scene on/off. The seconday use is to toggle a switch or light. It's intended to be used with helper entities, either input_select or input_booelan.

You connect the card to either an input_select (toggle between scenes) or input_boolean (toggle one scene) and the button will change the state of these entities. The final step is to create an automation that triggers on the state change and then runs the actions you want, apply a scene or interact with other entities.

The variable ulm_card_vertical_button_state needs to be used togehter with input_select to tie a specific state to the button.

Variables

Variable Default Required Notes
ulm_card_vertical_button_state on Compare the entity state value with this value, ex: the button will be on if the entity.state == state (only required with input_select)
ulm_card_vertical_button_color blue color for the when the button is on. The color names are defined in the theme. The following colors are supported: blue, green, yellow, pink, red, purple

Usage

- type: 'custom:button-card'
  template: card_vertical_button
  entity: input_select.test_vertical_buttons
  name: Away
  icon: mdi:television-classic
  show_last_changed: true
  variables:
    ulm_card_vertical_button_state: Away
    ulm_card_vertical_button_color: green
Template Code
card_vertical_button.yaml
---
### VERTICAL BUTTONS (fka SCENES) ###
card_vertical_button:
  variables:
    ulm_card_vertical_button_color: "blue"
    ulm_card_vertical_button_state: "on"
  show_label: true
  label: ""
  name: |
    [[[
      if( entity.entity_id.startsWith("input_select.") )
        return variables.ulm_card_vertical_button_state;
      else if( entity.entity_id.startsWith("input_boolean.") )
        return "";
      return entity.state;
    ]]]
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    label:
      - justify-self: "center"
      - align-self: "start"
      - font-weight: "bolder"
      - font-size: "12px"
      - filter: "opacity(40%)"
    name:
      - margin-top: "10px"
      - justify-self: "center"
      - font-weight: "bold"
      - font-size: "14px"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - place-self: "center"
      - width: "42px"
      - height: "42px"
    grid:
      - grid-template-areas: "'i' 'n' 'l'"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "10px 0px 8px 0px"
  size: "20px"
  state:
    - operator: "template"
      value: |
        [[[
          return entity.state == variables.ulm_card_vertical_button_state;
        ]]]
      styles:
        icon:
          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 1)`; ]]]"
        label:
          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}-text), 1)`; ]]]"
        name:
          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}-text), 1)`; ]]]"
        img_cell:
          - background-color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 0.2)`; ]]]"
        card:
          - background-color: "[[[ return `rgba(var(--color-background-${variables.ulm_card_vertical_button_color}), var(--opacity-bg))`; ]]]"
  tap_action:
    action: "call-service"
    service: |
      [[[
        if( entity.entity_id.startsWith("input_select.") )
          return "input_select.select_option";
        if( entity.entity_id.startsWith("input_boolean.") )
          return "input_boolean.toggle";
        if( entity.entity_id.startsWith("switch.") )
          return "switch.toggle";
        if( entity.entity_id.startsWith("light.") )
          return "light.toggle";
        if( entity.entity_id.startsWith("automation.") )
          return "automation.toggle";
        if( entity.entity_id.startsWith("input_button.") )
          return "input_button.press";
        // If we need to support other entities we can add these options here.
        return "";
      ]]]
    service_data: |
      [[[
        var obj;
        if( entity.entity_id.startsWith("input_select.") )
          obj = { entity_id: entity.entity_id, option: variables.ulm_card_vertical_button_state };
        else
          obj = { entity_id: entity.entity_id };
        return obj;
      ]]]