Tile Card with Built-in Badges

[a.hanlon]

Hi all - Please find below an extension to the Tile Card with the Badges behaviour from the Heading card. I have set the behaviour to follow the ‘features position’ - if the feature is inline, then the badges will be placed inline with the state, if the features are set to bottom, then the badges will be in the position of the inline feature. For my purposes, this provides a significant improvement to the Tile Card, allowing an ideal density of information/capability. The card was written to be a ‘patch’ to the Tile Card and reuses as much of the two as possible, including the visual UI. I would be happy to submit this as a PR for the Tile Card, if it was something the community would welcome.

You can use the JS file from the link below placed in your www folder to use this card. Any feedback welcome.

Link to JS

[Mariusthvdb (Marius)]

Nice.
Would be helpful to add the yaml for the cards you show above

[a.hanlon]

Thanks @Mariusthvdb - The Yaml is 1-to-1 with the Tile Card + the Badges entry matching the Headings card. Here are two examples:

Dishwasher (no features, badges in feature position):

type: custom:inline-badge-tile-card
entity: sensor.dishwasher_machine_state
name: Dishwasher
vertical: false
features_position: bottom
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: binary_sensor.dishwasher_leak_sensor_water_leak
    color: state
    icon: mdi:liquid-spot
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.dishwasher_outlet_current
    color: state
    icon: mdi:flash-outline
  - type: entity
    show_state: true
    show_icon: true
    entity: switch.dishwasher_outlet
    icon: mdi:power-socket-us
    color: blue
    tap_action:
      action: more-info
grid_options:
  columns: full

Ceiling Fan (Fan speed feature, badges next to State):

type: custom:inline-badge-tile-card
grid_options:
  columns: full
entity: fan.esp32_rf_transceiver_rf_fan
name: Ceiling Fan
vertical: false
features:
  - type: fan-speed
features_position: inline
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: switch.master_master_ceiling_fan_fan_reverse
    color: state
    icon: mdi:rotate-left
    name: Reverse
    tap_action:
      action: toggle
  - type: entity
    show_state: true
    show_icon: true
    entity: switch.esp32_rf_transceiver_override_remote
    tap_action:
      action: toggle
    color: state

[Holdestmade]

Tried this but got this error, HA 2026.9.1 installed:

Configuration error

Inline Badge Tile supports Home Assistant frontend 20260729.6; found 20260826.6

[a.hanlon]

@Holdestmade I have updated the JS to work with the latest build. Let me know if you still run into any issues.

[Holdestmade]

Thanks, but get this now:

Configuration error

Inline Badge Tile supports Home Assistant frontend 20260729.6, 20260826.4; found 20260826.6

[a.hanlon]

@Holdestmade I had seemingly made the version filter too specific. It should work now on any 20260826.*

[Holdestmade]

Perfect all working now. Great card !

[ComputerZOO (MAX)]

Where do I have to put the JS-File? Tried it directly in the www-folder and with a subfolder named „inline-badge-tile-card“ inside the www-folder.
I get the error „Custom element doesn’t exist: inline-badge-tile-card“.

[a.hanlon]

@ComputerZOO Hmm, it should go in the www folder directly as you had done. There shouldn’t be anything further needed, except a ‘quick restart’.

[Holdestmade]

I got it working with a few CTRL F5 and adding it to the Resources panel

[ShadowFist]

@a.hanlon

It should work now on any 20260826.*

That’s only going to kick the issue down the road when 2026.09XX comes out in a week or 2. Look at the historical versions of the frontend releases. Notice that it keeps incrementing with each release & that the last 3 digits change monthly.

I’m not a dev, but pretty sure others are simply validating that the version is >=20260729.6. Have a look at others’ custom frontend components and copy how they handle the version check.

[a.hanlon]

@ShadowFist Good call - I originally knew that the Tile Card was changing in the next version so was being defensive. With that sorted out now, I have updated the filter to be forwards-compatible.