We can use badges in the badges section of a view. And without anything further, we can only use badges there.
There have been quite a few requests to use badges in other parts of the Dashboard, and this post is to show we can, and how to do that.
We can do so with both the New style badges and the ‘old style’ badges.
Old style badges really are a state-badge-element like used in the picture-element cards.
We can use these adding the following ‘trick’, namely pretending they are custom, by prepending with custom:hui-:, making that into:
type: custom:hui-state-badge-element
(having a bit of styling fun with them is also possible using the new card_mod 4.0.0, but, as this post is not to focus on the card_mod options in particular, please go to that link if you want more on that )
As stated above, this post is to showcase, as sought by many:
How to use badges elsewhere in the views, outside of that badges section.
Turns out it uses the same ‘trick’ as above: prepend with custom:hui- to get things done.
We can use the exact same old_style badges like that:
- type: horizontal-stack
title: Stack with modified state badge
cards:
- type: custom:hui-state-badge-element
card_mod:
style: |
:host {
color: orange;
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: yellow;
--ha-label-badge-label-color: blue;
}
entity: light.alarm
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:hui-state-badge-element
entity: device_tracker.ha_main
- etc
and also the modern badges, (see this for some styling examples) and even combine them with eg an old style badge
type: horizontal-stack
cards:
- type: custom:hui-entity-badge
show_name: false
show_state: true
show_icon: true
entity: sun.sun
- type: custom:hui-entity-badge
show_name: false
show_state: true
show_icon: true
entity: sun.sun
- type: custom:hui-entity-badge
show_name: false
show_state: true
show_icon: true
entity: sun.sun
- type: custom:hui-state-badge-element
entity: sun.sun
card_mod:
style:
ha-state-label-badge:
(etcetc see link to card-mod thread)
when only using 1 or 2 modern style badges, we need to set the fit to content explicitly, otherwise we get this
which requires 1 single card_mod to make them fit their content, and not use the full stack width:
all we need to do is
type: horizontal-stack
title: Stack with modified new style badge
cards:
- type: custom:hui-entity-badge
show_name: false
show_state: true
show_icon: true
entity: sun.sun
card_mod:
style:
ha-badge:
$: |
.badge {
width: fit-content !important;
border: 2px solid gold !important;
box-shadow: var(--box-shadow-badges) !important;
}
and make the magic happen
or more:
- type: horizontal-stack
title: Stack with modified new style badge
cards:
- entity: sun.sun
<<: &new_style_badge_in_stack
type: custom:hui-entity-badge
show_name: false
show_state: true
show_icon: true
card_mod:
style:
ha-badge:
$: |
.badge {
width: fit-content !important;
border: 2px solid gold !important;
box-shadow: var(--box-shadow-badges) !important;
}
- entity: sun.sun
<<: *new_style_badge_in_stack
