Button Card Home Assistant: Guía para Mostrar Estados 2026

Actualizado el 04 de febrero de 2026

Continuamos profundizando en las posibilidades de la Button Card Home Assistant. En esta guía actualizada para 2026, vamos a construir dos tarjetas que son esenciales en cualquier Home Assistant dashboard: una para monitorización de sensores de porcentaje y otra para visualizar estados complejos de dispositivos. Si es tu primera vez con esta tarjeta, te recomiendo encarecidamente leer la guía de instalación inicial, ya que es la base sobre la que trabajaremos.

La primera tarjeta cambiará su icono y color dinámicamente según el nivel de una batería, aunque es un método aplicable a cualquier sensor que devuelva un porcentaje, como el nivel de apertura de una persiana o el llenado de un depósito. La segunda tarjeta es un ejemplo más avanzado de smart home automation: mostrará el estado de una luz y, al mismo tiempo, la temperatura de otra entidad, todo en un diseño compacto y personalizado gracias a CSS Grid.

Creando una Tarjeta de Batería Dinámica con Button Card

El objetivo aquí es el sensor monitoring de forma visual e intuitiva. Queremos que, de un solo vistazo, se pueda saber el estado de la batería de un dispositivo. Usaremos plantillas de JavaScript directamente en el YAML para que el color del icono cambie de verde a rojo a medida que el nivel desciende, y el propio icono refleje la carga restante.

Este es el código que necesitas. Recuerda cambiar sensor.t671h_battery_level por la entidad de tu sensor.

type: custom:button-card
entity: sensor.t671h_battery_level
name: Batería del Teléfono
show_state: true
styles:
  card:
    - border-radius: 15px
    - border: 2px solid var(--primary-text-color)
    - background-color: var(--ha-card-background, var(--card-background-color, #1c1c1c))
  name:
    - color: var(--primary-text-color)
    - font-weight: bold
  state:
    - font-weight: bold
    - color: var(--secondary-text-color)
  grid:
    - grid-template-areas: '"n" "i" "s"'
  icon:
    - color: |
        [[[
          const state = entity.state;
          if (state < 10) return "var(--error-color)";
          if (state < 20) return "var(--warning-color)";
          if (state < 40) return "yellow";
          return "var(--success-color)";
        ]]]
icon: |
  [[[
    const state = Math.round(entity.state / 10) * 10;
    if (entity.state > 95) return "mdi:battery";
    if (state == 0) return "mdi:battery-outline";
    if (isNaN(state)) return "mdi:battery-unknown";
    return "mdi:battery-" + state;
  ]]]

Análisis del código:

• styles: En esta versión de 2026, he actualizado los colores fijos (como rgb(255,255,255)) por variables de tema de Home Assistant (ej: var(--primary-text-color)). Esto hace que la tarjeta se adapte automáticamente a tus temas claro y oscuro.
• grid: Utilizamos grid-template-areas para definir una estructura simple de tres filas: nombre (n), icono (i) y estado (s).
• icon color: La lógica JavaScript evalúa el estado de la entidad (entity.state). Dependiendo del valor, devuelve un color diferente. He simplificado la lógica y usado variables de color del sistema para una mejor integración.
• icon: De forma similar, una plantilla de JavaScript selecciona el icono de Material Design Icons más apropiado. He optimizado el código para que sea más compacto y eficiente que la larga cadena de if del diseño original.

Visualización Avanzada de Estado: Luz y Sensor de Temperatura

Vamos un paso más allá en la creación de custom UI elements. Esta tarjeta no solo muestra si una luz está encendida o apagada, sino que también aprovecha un espacio en la esquina para mostrar la lectura de un sensor de temperatura, creando un widget de información multifuncional.

La clave aquí es un uso más complejo de la cuadrícula CSS para posicionar cada elemento con precisión. Cambia light.sofa y sensor.temperatura_salon por tus propias entidades.

type: custom:button-card
entity: light.sofa
name: Sofá
icon: mdi:sofa
show_state: false
styles:
  card:
    - border-radius: 20px
  grid:
    - grid-template-areas: '"i temp" "n temp"'
    - grid-template-columns: 1fr auto
    - grid-template-rows: 1fr auto
  icon:
    - color: |
        [[[
          return entity.state === 'on' ? 'var(--paper-item-icon-active-color)' : 'var(--paper-item-icon-color)';
        ]]]
custom_fields:
  temp: |
    [[[
      const temp_entity = states['sensor.temperatura_salon'];
      if (temp_entity) {
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 18px; height: 18px; color: var(--secondary-text-color);">
          </ha-icon>
          <span style="color: var(--primary-text-color); font-size: 14px;">
            ${Math.round(temp_entity.state)}°C
          </span>`
      }
      return '';
    ]]]

Análisis del código:

• grid: La configuración grid-template-areas: '"i temp" "n temp"' crea una cuadrícula de 2×2. El icono (i) y el nombre (n) ocupan la primera columna, mientras que el campo personalizado de temperatura (temp) se expande para ocupar las dos filas de la segunda columna.
• icon color: Una simple expresión ternaria en JavaScript asigna el color activo si la luz está on y el color por defecto si está off.
• custom_fields: Aquí reside la magia.
  • Definimos un campo llamado temp.
  • Dentro, el JavaScript accede al estado de una entidad completamente diferente (states['sensor.temperatura_salon']).
  • Construye un fragmento de HTML que incluye un icono y el valor redondeado del sensor. Esta es una técnica increíblemente potente para combinar información en la Lovelace UI.

Solución de Problemas Comunes y Preguntas Frecuentes (FAQ)

Incluso con la configuración correcta, a veces las cosas no salen como se espera. Aquí tienes soluciones a los problemas más habituales.