Sub Button Heading Text

[keatontaylor]

Goal

For my bubble cards, I am using sub-buttons as a means of displaying state of devices that do not allow direct interaction, for example on my Kitchen card I use a sub-button to show when the dishwasher is running.

What I'd love to be able to do is have a header for these cards that more easily identifies them instead of just relying on the icon itself or having to increase the horizontal width by adding the name on the same line.

Basically my goal is similar to a chip card:

but within the bubble card:

Source Yaml

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: state
        name: Kitchen
        icon: mdi:stove
        show_icon: true
        sub_button:
          - entity: binary_sensor.refrigerator_contact
            show_background: false
            show_icon: true
            visibility:
              - condition: state
                entity: binary_sensor.refrigerator_contact
                state: "on"
            show_state: true
          - entity: switch.dishwasher_power_on
            icon: mdi:dishwasher
            visibility:
              - condition: state
                entity: switch.dishwasher_power_on
                state: "off"
            name: dishwasher off
          - entity: sensor.dishwasher_program_phase
            show_state: true
            icon: mdi:dishwasher
            visibility:
              - condition: state
                entity: switch.dishwasher_power_on
                state: "on"
            name: dishwasher running
          - entity: light.kitchen_lights
            icon: mdi:light-recessed
            light_background: false
            tap_action:
              action: toggle
          - entity: light.kitchen_island
            icon: mdi:ceiling-light
            light_background: false
            show_name: false
            tap_action:
              action: toggle
          - entity: light.dining_room_lights
            icon: mdi:table-picnic
            state_background: false
            tap_action:
              action: toggle
        card_layout: large
        entity: binary_sensor.presence_sensor_fp2_61d4_presence_sensor_2
        styles: |+

          .bubble-button-card-container {
            background: ${state === 'on' ? 'rgba(120,12,50,0.5)' : ''} !important;
          }

          .bubble-icon-container {
            overflow: visible;
          }

          .bubble-sub-button-3 .bubble-sub-button-icon{
            animation: ${hass.states['switch.dishwasher_power_on'].state === 'on' ? 'wash 0.9s' : ''} !important;
            animation-iteration-count: infinite  !important;
          }
          .bubble-sub-button-3 {
            background: transparent;
          }


            @keyframes wash {
              0% { transform: rotate(0deg); }
              25% { transform:  rotate(-10deg); }
              50% { transform:  rotate(0deg); }
              75% { transform:  rotate(10deg); }
              100% { transform:  rotate(0deg); }
            }


        tap_action:
          action: perform-action
          perform_action: automation.toggle
          target:
            entity_id: automation.test_living_room_lights
        button_action:
          tap_action:
            action: navigate
            navigation_path: "#kitchen"
          double_tap_action:
            action: none
          hold_action:
            action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        show_attribute: false
        attribute: options
        show_last_changed: false

Which step did you already try?

Attempted overriding the sub-buttons text to include a new line, but that resulted in formatting that was ugly and off.

Problem

No response

Read the documentation

• I have read the documentation

[Menelao147]

You can use this code to change the text of the sub-button:

.bubble-sub-button-name-container{
  flex-wrap: wrap !important;
}
${card.querySelector('.bubble-sub-button-name-container').innerHTML = "Dishwasher"+"<br/>"+"<b>Actual Mode</b>"}

Or use this to display an entity's state:

.bubble-sub-button-name-container{
  flex-wrap: wrap !important;
}
${card.querySelector('.bubble-sub-button-name-container').innerHTML = "Dishwasher"+"<br/>"+"<b>"+ hass.states['you_entity_here'].state +"</b>"}

---

_{If this solves your problem, mark this as solved and close the discussion.}

[keatontaylor]

Thanks for the tips works great! Question I have regarding hass.states['you_entity_here'].state, is there a way to get the state_translated(). Referring to: https://www.home-assistant.io/docs/configuration/templating/#state-translated

That way I can show the nice friendly state vs. something like pre_cleaning it'll say Pre Cleaning

[Menelao147]

As written in the README, try by using this:

You can use hass.formatEntityState(state) to transtale a state and hass.formatEntityAttributeValue(state, "attribute") to translat

.bubble-sub-button-name-container{
  flex-wrap: wrap !important;
}
${card.querySelector('.bubble-sub-button-name-container').innerHTML = "Dishwasher"+"<br/>"+"<b>"+ hass.formatEntityState(hass.states[state]) +"</b>"}