Custom Button Card, can you align labels

Configuration Frontend
1

I have 2 entities and 1 name I would like them all in a single line, can this be done? The layout command does not seem to support labels.

here is my code

type: custom:button-card
entity: input_datetime.heating_ch_ur_p1_time
show_state: true
show_icon: false
show_label: true
name: P1
layout: name_state
label: |
  [[[
    return  states['input_number.heating_ch_ur_p1_temp'].state + " °C"
  ]]]
styles:
  card:
    - height: 45px
    - width: 150px
    - font-size: 14px

This is what I get, but I want the temperature to be on the same line.
image
Also want to be able to click on the label entity

2

Untested:

  1. Remove layout option.
  2. Add this
styles:
  grid:
    - grid-temple-column: >-
        “n” “s” “l”

Cannot test myself.

3

Test

type: custom:button-card
show_icon: false
show_name: false
show_state: false
show_label: false
custom_fields:
  info: |
    [[[
      const time = states['sensor.time']?.state || "–";
      const temp = states['sensor.openweathermap_feels_like_temperature']?.state || "–";
      return `<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <span>P1(name) </span>
                <span>${time}</span>-
                <span>${temp} °C</span>
              </div>`;
    ]]]
styles:
  card:
    - height: 45px
    - width: 270px
    - font-size: 24px
    - padding: 0 10px
  custom_fields:
    info:
      - align-self: center
      - justify-self: center

ScreenShot_20250502215408
ScreenShot_202505022154081530×379 34.8 KB

4

Using custom fields is an overkill here, but could be a good educational example.

5

Thank you very much, layout ok but cant click on the entities!

6

Thank you for the reply, but did not work

7

Add to code

tap_action:
  action: more-info
  entity: sensor.openweathermap_feels_like_temperature # Which sensor should be displayed
8

Thanks, but I have 2 entities on 1 card Time & Temperature, would like to click and on either, to adjust both.

9

:thinking:

Two sensors are displayed and each responds to a click

ScreenShot_20250510193055
ScreenShot_202505101930551905×290 28.6 KB

type: horizontal-stack
cards:
  - type: custom:button-card
    show_icon: false
    show_name: true
    name: |
      [[[ return "⏰  " + states['sensor.time']?.state || "–"; ]]]
    styles:
      card:
        - height: 45px
        - width: 130px
        - font-size: 20px
        - padding: 0 10px
    tap_action:
      action: more-info
      entity: sensor.time
  - type: custom:button-card
    show_icon: false
    show_name: true
    name: |
      [[[ 
        const temp = states['sensor.openweathermap_feels_like_temperature']?.state || "–";
        return "🌡️ " + temp + " °C";
      ]]]
    styles:
      card:
        - height: 45px
        - width: 130px
        - font-size: 20px
        - padding: 0 10px
    tap_action:
      action: more-info
      entity: sensor.openweathermap_feels_like_temperature
10

Thanks for your examples, very useful

1 Like