Button Card Home Assistant: Guía Completa y Fácil 2026

Actualizado el 03 de febrero de 2026

Si buscas transformar por completo la interfaz de usuario de Home Assistant, la Button Card es, sin duda, la herramienta definitiva que necesitas en 2026. Esta tarjeta personalizada te permite ir mucho más allá de los botones estándar, ofreciendo un nivel de personalización que puede dar una nueva vida a tus paneles Lovelace. En esta guía actualizada, te mostraré cómo exprimir al máximo sus capacidades para crear una interfaz no solo funcional, sino también estéticamente impresionante.

Características Clave de Button Card en 2026

La popularidad de Button Card no es casualidad. Su versatilidad se debe a un conjunto de características muy potentes que se han mantenido y mejorado a lo largo de los años:

1. Compatibilidad Universal: Funciona con prácticamente cualquier entidad de Home Assistant, especialmente aquellas que tienen un estado conmutable (luces, interruptores, etc.).
2. Múltiples Acciones: Permite configurar hasta 6 acciones distintas mediante toque, doble toque y mantener pulsado. Las acciones disponibles son none, toggle, more-info, navigate, url y call-service.
3. Personalización Visual Extrema: Ofrece control total sobre colores, iconos, tamaños y estilos CSS. El color puede ser fijo, automático (basado en el color de una luz) o dinámico según el estado de una entidad.
4. Estados Dinámicos: Puedes definir diferentes iconos, colores y estilos para cada estado de una entidad (p. ej., un icono para ‘on’, otro para ‘off’, y otro para ‘unavailable’).
5. Plantillas Javascript: Para una personalización avanzada, admite el uso de plantillas de Javascript en la mayoría de sus campos, permitiendo lógica condicional directamente en la configuración de la tarjeta.
6. Diseños Flexibles (Layouts): Viene con múltiples diseños predefinidos para organizar el icono, el nombre y el estado, además de permitir la creación de diseños personalizados.
7. Animaciones: Soporta animaciones nativas como parpadeo (blink) y rotación (spin), ideales para indicar estados activos o de alerta.
8. Seguridad Integrada: Incluye opciones de confirmación antes de ejecutar una acción y un mecanismo de bloqueo para evitar pulsaciones accidentales en controles sensibles.
9. Integración con la App Móvil: Soporte háptico para la aplicación complementaria de Home Assistant en iOS y Android.

Instalación Sencilla con HACS

En 2026, la forma más sencilla y recomendada de instalar y mantener actualizada la Button Card es a través de HACS (Home Assistant Community Store). Si aún no lo tienes instalado, te recomiendo seguir nuestra guía completa.

Una vez con HACS funcionando:

1. Ve a HACS > Frontend.
2. Haz clic en el botón azul «Explorar y descargar repositorios».
3. Busca «Button Card» y selecciónala.
4. Haz clic en «Descargar» y sigue las instrucciones para añadir el recurso a tu Lovelace.

Configuración de Button Card: Guía Completa

La configuración de la tarjeta se realiza mediante código YAML. A continuación, desglosamos las opciones más importantes que necesitarás para dominarla.

Opciones Principales

Estas son las propiedades fundamentales para definir el comportamiento y la apariencia de tu tarjeta.

Definiendo Acciones (tap, hold, double_tap)

Cada una de las tres acciones (tap_action, hold_action, double_tap_action) es un objeto que contiene una propiedad action y, opcionalmente, datos adicionales. Por ejemplo:

tap_action:
  action: call-service
  service: light.turn_on
  service_data:
    entity_id: light.cocina
    brightness: 255

Confirmación de Acción

Ideal para acciones destructivas o importantes, como apagar un servidor o abrir la puerta del garaje.

Bloqueo de Seguridad (Lock)

Muestra un candado que debe ser pulsado para «desbloquear» el botón durante unos segundos, permitiendo su uso normal.

Estados Dinámicos y Personalizados

Aquí reside la magia de Button Card. La sección state te permite cambiar la apariencia de la tarjeta en función del estado de la entidad. El sistema evalúa la lista de estados en orden y aplica el primer estilo que coincida.

Operadores de Comparación

Ejemplos Prácticos de Button Card en Home Assistant (2026)

Vamos a ver cómo aplicar todo lo anterior con ejemplos de YAML que puedes copiar y adaptar para tu configuración.

Ejemplo 1: Ventilador Animado con Imagen Personalizada

Este es un clásico. Mostramos una imagen de un ventilador que rota cuando está encendido. Las imágenes deben estar en tu carpeta /config/www/.

type: custom:button-card
entity: fan.ventilador_despacho
show_entity_picture: true
tap_action:
  action: toggle
state:
  - value: 'off'
    entity_picture: /local/icon-fan-off.png
  - value: 'on'
    entity_picture: /local/icon-fan-on.png
    spin: true
    styles:
      entity_picture:
        - animation: 'rotating 1s linear infinite'

Ejemplo 2: Control Avanzado de Luces RGB

Este botón controla una luz. Con un toque la enciende/apaga. Manteniendo pulsado, abre el diálogo de detalles para cambiar color y brillo. El color del icono refleja el color real de la luz.

type: custom:button-card
entity: light.tira_led_salon
name: Tira LED Salón
icon: mdi:led-strip-variant
color_type: icon
color: auto
tap_action:
  action: toggle
hold_action:
  action: more-info
state:
  - value: 'off'
    styles:
      icon:
        - opacity: 0.5
  - value: 'on'
    styles:
      icon:
        - animation: 'blink 2s linear infinite'
        - filter: brightness(120%)

Ejemplo 3: Botón para Persianas con Múltiples Acciones

Un botón para controlar una persiana. Un toque la sube o la baja completamente, un doble toque la detiene, y al mantener pulsado se abre el control deslizante.

type: custom:button-card
entity: cover.persiana_dormitorio
name: Persiana
icon: mdi:blinds
tap_action:
  action: call-service
  service: cover.toggle
double_tap_action:
  action: call-service
  service: cover.stop_cover
hold_action:
  action: more-info
state:
  - value: 'open'
    icon: mdi:blinds-open
  - value: 'closed'
    icon: mdi:blinds

Ejemplo 4: Activador de Escenas con Confirmación

Un botón simple para activar una escena, pero con un diálogo de confirmación para evitar activaciones accidentales.

type: custom:button-card
name: Modo Cine
icon: mdi:movie-open
tap_action:
  action: call-service
  service: scene.turn_on
  service_data:
    entity_id: scene.modo_cine
  confirmation:
    text: '¿Quieres activar el Modo Cine?'
styles:
  card:
    - background-color: '#333355'
    - color: white

Solución de Problemas Comunes (Troubleshooting)

Aunque Button Card es muy estable, a veces pueden surgir problemas. Aquí tienes los más comunes y sus soluciones:

• Error: «Custom element doesn’t exist: button-card»: Este es el problema más frecuente. Significa que Home Assistant no ha podido cargar el código de la tarjeta.
  • Solución 1: Limpia la caché de tu navegador por completo.
  • Solución 2: Asegúrate de que la ruta al archivo button-card.js en Configuración > Paneles > Recursos es correcta. HACS debería gestionarlo automáticamente, pero una revisión manual nunca está de más. La ruta debería ser algo como /hacsfiles/button-card/button-card.js.
• La tarjeta no se muestra o muestra un error de YAML:
  • Solución: La causa casi siempre es un error de indentación en tu código YAML. Usa un editor de código como Visual Studio Code con la App (anteriormente conocido como Add-on) de Home Assistant para validar tu sintaxis antes de guardar.
• Una plantilla no funciona como esperaba:
  • Solución: Las plantillas de Javascript se escriben entre [[[ ... ]]]. Un error común es olvidar los corchetes o usar una sintaxis incorrecta. Prueba tu lógica en la sección de Herramientas para desarrolladores > Plantilla de Home Assistant para depurar el código.

Con esta guía definitiva de 2026, tienes todo lo necesario para llevar la automatización y personalización de tu Home Assistant al siguiente nivel con Button Card. ¡Es hora de experimentar y crear la interfaz de tus sueños!