button-card: botones a tu medida con estados y JavaScript

Descripción general

button-card es la navaja suiza de los botones: cada parte (icono, nombre, estado, etiqueta y campos propios) se puede mover, colorear y animar, y cualquier texto puede calcularse con JavaScript. Con plantillas defines un estilo una vez y lo reutilizas en todo el panel.

Botones de button-card con estilo similar a los de Apple Home, animados al pulsar — Botones al estilo de Apple Home.

Esquema de las partes de button-card: tarjeta, rejilla, celda de imagen, nombre, estado y etiqueta — Las partes de la tarjeta que puedes personalizar.

Imágenes: button-card de custom-cards, licencia MIT.

Requisitos

HACS → «button-card» → Descargar y recarga el navegador.
Algo de JavaScript ayuda, pero no es imprescindible.
Repositorio: custom-cards/button-card.

Ideas de uso

Botón de habitación que encienda la luz y muestre la temperatura de esa habitación. Es el ejemplo de abajo.
Botón de electrodoméstico que cambie de color mientras funciona y muestre el tiempo restante.
Botón de persiana con el porcentaje de apertura y el icono girando mientras se mueve.
Aviso parpadeante cuando una puerta lleva abierta más de 5 minutos.
Botón de confirmación para acciones delicadas (abrir el garaje) con confirmation.
Plantilla común con bordes redondeados, sombra y colores de tu casa para que todo el panel sea coherente.

Ejemplo de uso

type: custom:button-card
entity: light.salon
name: Salón
icon: mdi:sofa
show_state: true
show_label: true
label: >
  [[[ return `${states['sensor.temperatura_salon'].state} °C`; ]]]
tap_action:
  action: toggle
hold_action:
  action: more-info
styles:
  card:
    - border-radius: 18px
    - padding: 12px
state:
  - value: "on"
    styles:
      card:
        - background-color: "#0B0F14"
        - color: "#F8FAFC"
      icon:
        - color: "#34D1BF"

Cómo funciona:

tap_action y hold_action definen qué pasa al tocar y al mantener: alternar, abrir detalles, navegar o lanzar una acción.
state aplica estilos según el estado: aquí, fondo oscuro e icono verde agua cuando la luz está encendida.
Lo que va entre [[[ ]]] es JavaScript, con acceso a states, entity, user y hass.
Para reutilizar estilos, defínelos en button_card_templates y aplícalos con template: nombre.

Acción

Tocas el botón · la luz se enciende

Resultado

Fondo negro · icono verde agua
«Salón · Encendida · 21.5 °C»