[Feature]: Allow buttons in Template card

[netsoft-ruidias]

Requirements

• [X] I have updated Mushroom to the latest available version
• [X] I did a search to see if there is a similar issue or if a pull request is open.

Is your feature request related to a problem?

I would like the possibility to add buttons with custom actions in mushroom-template-card.

When we create a template card, we can customize all properties to have the look and feel of the other cards, but with custom data. It would be interesting to also be able to define actions.

Describe the solution you'd like

The solution should be something along the line of defining the action through yaml, like this:

- type: custom:mushroom-template-card
  entity: sensor.xyz
  primary: '{{ state_attr(entity, ''friendly_name'') }}'
  secondary: '{{ states(entity) }}' XY
  icon: |
    {% set target=state_attr(entity, 'temperature') %}
    {% set current=state_attr(entity, 'current_temperature') %}
    {% if current < target %}
      mdi:thermometer-chevron-up
    {% else %}
      mdi:thermometer-chevron-down
    {% endif %}  
  icon_color: |-
    {% set state=states(entity) %}
    {% if state=='heat_cool' %}
      var(--rgb-orange)
    {% elif state=='heat' %}
      var(--rgb-red)
    {% else %}
      var(--rgb-disabled)
    {% endif %}
  tap_action:
    action: call-service
      service: browser_mod.more_info
      service_data:
        entity_id: sensor.xyz
        deviceid:
          - this
  # new feature starts here:
  actions:
    - type: action
      icon: mdi:fan-speed-1
      tap_action:
        action: call-service
        service: fan.set_fan_speed
        service_data:
          entity_id: entity.xxx
          fan_speed: Silent
    - type: action
      icon: mdi:fan-speed-2
      tap_action:
        action: call-service
        service: fan.set_fan_speed
        service_data:
          entity_id: entity.xxx
          fan_speed: Standard
    - type: action
      icon: mdi:fan-speed-3
      tap_action:
        action: call-service
        service: fan.set_fan_speed
        service_data:
          entity_id: entity.xxx
          fan_speed: Strong
    - type: conditional
      conditions:
        - entity: binary_sensor.xxxyyyzzz
          state: 'on'
      action:
        icon: mdi:weather-windy
        tap_action:
          action: call-service
          service: fan.set_fan_speed
          service_data:
            entity_id: entity.xxx
            fan_speed: Turbo

This code would produce a card with three or four buttons depending on the state of the entity.

Describe alternatives you've considered

Actions can be defined just like chips, that is:

  # An action allows you to perform a Home Assistant action (navigate, call-service, etc...).
- type: action
  icon: mdi:thermometer-lines
  tap_action:
    (...)

  # A conditional action allows you to display another action based on state.
- type: conditional
  conditions:
    (...)
  action:
    type: (...)
      (...)

  # An entity action allows you to toggle entity state.
- type: entity
  icon: mdi:power
  entity: switch.xyz

  # An light action allows you to toggle light on/off.
- type: light
  icon: mdi:ceiling-light-multiple
  entity: light.xyz

Additional context

No response

[samuolis]

Really good idea, now it is only achievable by vertical stack-in-card. It would reduce a lot of this complexity

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: light.living_room_3
    icon_type: icon
    icon: mdi:television
    icon_color: disabled
    fill_container: false
    secondary_info: state
    primary: Living room
    secondary: '{{ states(''sensor.living_room_temperature'') | round(1) }} °C '
    tap_action:
      action: navigate
      navigation_path: /lovelace-mobile/living-room
    multiline_secondary: false
    badge_color: |-
      {% if is_state('switch.living_room_sensor_motion', 'off') %}
        disabled
      {% elif states('binary_sensor.living_room_all_motions_sensor') == 'on' %}
        red
      {% else %}
        disabled
      {% endif %}
    badge_icon: |-
      {% if is_state('switch.living_room_sensor_motion', 'off') %}
        mdi:motion-sensor-off
      {% elif states('binary_sensor.living_room_all_motions_sensor') == 'on' %}
        mdi:motion-sensor
      {% endif %}
    hold_action:
      action: none
    double_tap_action:
      action: none
  - type: custom:mushroom-chips-card
    alignment: center
    chips:
      - type: light
        entity: light.living_room_3
        content_info: none
        icon_color: orange
        card_mod:
          style: |
            ha-card {
              {% if is_state('light.living_room_3', 'on') %}
                --chip-background: rgba(var(--rgb-orange), 0.15);
              {% endif %}
            }
      - type: template
        entity: climate.living_room
        icon: mdi:fire
        double_tap_action:
          action: none
        tap_action:
          action: more-info
        hold_action:
          action: call-service
          service: climate.set_hvac_mode
          data:
            hvac_mode: auto
          target:
            entity_id: climate.living_room
        icon_color: |-
          {% if state_attr("climate.living_room", "hvac_action") == "heating" %}
           red
          {% endif %}
        card_mod:
          style: |
            ha-card {
              {% if is_state('climate.living_room', 'auto') %}
                --chip-background: rgba(var(--rgb-green), 0.15);
              {% elif is_state('climate.living_room', 'heat') %}
                --chip-background: rgba(var(--rgb-red), 0.15);
              {% endif %}
            }
      - type: template
        entity: climate.living_room_air_cond
        icon: mdi:snowflake
        double_tap_action:
          action: none
        tap_action:
          action: more-info
        hold_action:
          action: call-service
          service: climate.set_hvac_mode
          data:
            hvac_mode: 'off'
          target:
            entity_id: climate.living_room_air_cond
        icon_color: |-
          {% if states("climate.living_room_air_cond") == "heat_cool" %}
           green
          {% elif states("climate.living_room_air_cond") == "heat" %}
           red
          {% elif states("climate.living_room_air_cond") == "cool" %}
           blue
          {% endif %}
        card_mod:
          style: |
            ha-card {
              {% if states("climate.living_room_air_cond") == "heat_cool"
              %}
               --chip-background: rgba(var(--rgb-green), 0.15);
              {% elif states("climate.living_room_air_cond") ==
              "heat" %}
               --chip-background: rgba(var(--rgb-red), 0.15);
              {% elif states("climate.living_room_air_cond") ==
              "cool" %}
               --chip-background: rgba(var(--rgb-blue), 0.15);
              {% endif %}
            }
    card_mod:
      style: |
        ha-card {
          margin-bottom: 12px;
          --chip-background: rgba(var(--rgb-grey), 0.1);
          --chip-border-radius: 12px;
          --chip-height: 40px;
        }

[mikedrawback]

I've been doing this a lot with paper-buttons-row and stack-in-card. Would love to see custom buttons supported.

[NickChristensen]

@mikedrawback that looks great, mind sharing the yaml?

[mikedrawback]

@NickChristensen here is the YAML for that kitchen lights card. The most you can fit on the right side is probably 4 buttons.

type: custom:stack-in-card
cards:
  - type: grid
    columns: 2
    square: false
    cards:
      - type: custom:mushroom-light-card
        entity: light.kitchen
        name: Kitchen
        icon: mdi:light-recessed
        use_light_color: false
      - type: custom:paper-buttons-row
        preset: mushroom
        styles:
          justify-content: flex-end
        base_config:
          styles:
            button:
              margin-top: 12px
              margin-right: 12px
        buttons:
          - entity: light.kitchen_counter
            layout: icon
            icon: mdi:faucet-variant
            tap_action:
              action: toggle
          - entity: light.kitchen_range_lights
            layout: icon
            icon: mdi:stove
            tap_action:
              action: toggle
          - entity: switch.kitchen_counter
            layout: icon
            icon: mdi:knife
            tap_action:
              action: toggle
          - layout: icon
            icon: mdi:view-list
            tap_action:
              action: navigate
              navigation_path: /lovelace-mobile/kitchen-lights

[piotrtobolski]

Any updates on this feature? I don't feel good enough at web development to add this myself but I think it shouldn't be that difficult as there is already mushroom-button with the right styles. We just need a way to add those elements to the template specifying an icon, color, action and style (to get the horizontal appearance like we get for covers or climates). It would be very useful to group different entities in a single card, e.g. climate + button controlling it's quiet mode. Additional accessories like number selectors/sliders would be nice too in the future.

[bdsoha]

This feature can be found natively in many cards. Still missing as part of the template 😔.