Home assistant lovelace custom cards

Home assistant lovelace custom cards DEFAULT

These are the most popular Lovelace (Home Assistant dashboard) cards

In my opinion, one of the best things about the Home Assistant dashboard (Lovelace) is the fact that you can add custom cards. While I do not have the capabilities of developing my own cards, a bunch of very useful cards have emerged from the Home Assistant community. Some of these cards have been developed specifically for a single integration, such as the Lovelace Xiaomi Vacuum Map card, while others can be used more broadly.

As with most Home Assistant community add-ons, these cards are available from the Home Assistant Community Store. And as always, I recommend you install them using the store. That way, you will be able to update any of the cards from the Home Assistant dashboard.

Lovelace Mini Graph Card

The Lovelace Mini Graph Card is one of my absolute favourite custom Lovelace cards. And I’m not alone in that thinking. With over 1000 stars on GitHub, the developer has seemingly struck gold in the Home Assistant community. The Lovelace Mini Graph Card is a big improvement over the default History Graph Card.

Setting up the Lovelace Mini Graph Card is not the easiest of tasks, as there are a ton of customization options available. But once you get going, you will soon find yourself adding this card wherever possible. Among many other things, I use this card to monitor the following:

This card can also be used to monitor the temperature and humidity of rooms over time, display your power consumption over time, and tell you in which room motion has been detected. Any sensor and binary sensor can be displayed using this card.

This Lovelace card gets a definite recommendation from me. Using it, you can display sensor information in an attractive and useful way.

Mini Media Player

The second most popular custom Lovelace card is another one I use on many of my views, mainly to control my multiple Google Nest smart speakers. It is, of course, the popular Mini Media Player with currently over 725 stars on GitHub. Incidentally, the same person who is responsible for the Lovelace Mini Graph Card developed this card. Developer Karl Kihlström seems to know what Home Assistant dashboards need.

If you use either this card or the Lovelace Mini Graph Card and want to support the further development, you can sponsor the developer on PayPal. More information about their further projects, such as the community-sourced lyrics app Singlyricly, can be found on their personal website.

Lovelace Button card

This card is, as with the previously mentioned cards, a more customizable alternative to what is included with Home Assistant out of the box. The Lovelace Button card works with any toggleable entity.

You can select from six available actions on tap, hold, or double click: none, toggle, more-info, navigate, URL and call-service. Furthermore, you can create your own layouts, customize the aspect ratio, use icons of your liking, and even use JavaScript templates in some fields.

In contrast to the top two cards, I have never used this one extensively. I have had a play around with it, but ,so far, it isn’t used on any of my non-testing views.

Sours: https://home-assistant-guide.com/2020/10/14/these-are-the-most-popular-lovelace-home-assistant-dashboard-cards/

Awesome Home Assistant Awesome

Home Assistant is an open source home automation that puts local control and privacy first. Powered by a worldwide community of tinkerers and DIY enthusiasts. Perfect to run on a Raspberry Pi or a local server.

If you want to get an impression on the look and feel, you should check out the Home Assistant online demo.

Awesome Home Assistant is a curated list of awesome Home Assistant resources. Additional software, tutorials, custom integration, add-ons, custom Lovelace cards & plugins, cookbooks, example setups, and much more.

The list is divided into categories. The links in those categories do not have pre-established order; the order is for contribution. If you want to contribute, please read the guide.


How to use¶

Awesome Home Assistant is a fantastic list for people trying to automate every aspect of their home. Automating your home is a long, hard, and never finished task that usually involves a lot of tinkering.

You can navigate through the list by:


Home Assistant has several installation / running methods. Many people have different opinions and their personal favorites. Each method has its advantages and disadvantages. Important to know, there is no wrong, or right here, each technique installs the SAME Home Assistant.

Home Assistant currently recommends the Home Assistant OS installation method.

In case you need help¶

There are various ways to get in touch with the Home Assistant community. It doesn't matter if you have a question, need help, want to request a feature, or just say ‘Hi’.

Official Channels¶

Other Channels¶

Public Configurations¶

Some people store their full Home Assistant configuration on GitHub. They are an awesome source for learning and a great source of inspiration.

  • Carlo Costanzo - Probably the most documented configuration out there.
  • DubhAd - Also known as Tinkerer shares his configuration files.
  • geekofweek - Has over 300+ automations.
  • Isabella Gross Alström - Hass.io, Intel NUC, Ubuntu, Docker, Lovelace UI.
  • Mahasri Kalavala - Impressive setup, with lots of different hardware working together.
  • stanvx - Complete setup which uses AppDaemon and HA Floorplan as well.
  • Vasiley - Runs two instances that work together.
  • Alok Saboo - Also known as arsaboo. Regularly updated.
  • Aaron Bach - Also known as bachya. Regularly updated and includes numerous Dockerized services.
  • James McCarthy - Well documented, 3 instances & automations in YAML & Node-RED.
  • Franck Nijhof - Hass.io based, very different configuration structure compared to others.
  • Andrea Donno - Hass.io based, focused on touchscreen usage.
  • Klaas Schoute - Hass.io based, Intel NUC, Ubuntu Server, Docker and regularly updated.
  • Jason Hunter - Hass.io based, Intel NUC i5, TensorFlow & camera streams.
  • Nathan - Lovelace config and themes based on Soft UI.
  • Andrea Iannucci - Also known as SeLLeRoNe. Regularly updated.


Add-ons are additional applications and services, that can be run alongside Home Assistant. The Home Assistant OS and Supervised installations types, provide the Supervisor, which is capable of running and manage these add-ons.

Official Add-ons¶

Created and maintained by the Home Assistant team.

  • DuckDNS - Updates your Duck DNS IP address and generate SSL using Let's Encrypt.
  • File editor - Browser-based configuration file editor.
  • Mosquitto - Fast and reliable MQTT broker.
  • Terminal & SSH - Allows logging in remotely to using a web terminal or SSH client.
  • Samba - Access your configuration files using Windows network shares.
  • NGINX SSL proxy - Reverse proxy with SSL termination.
  • deCONZ - Control a ZigBee network using ConBee or RaspBee hardware by Dresden Elektronik.
  • TellStick - Run a TellStick and TellStick Duo service.
  • Ada - Ada is voice assistant powered by Almond which is open and privacy-preserving.
  • Almond - The Open, Privacy-Preserving Virtual Assistant.
  • HomeMatic - HomeMatic central based on OCCU.
  • Let's Encrypt - Get a free SSL certificate from Let's Encrypt; an open and automated certificate authority (CA).
  • MariaDB - An open source relational database (fork of MySQL).
  • OpenZWave - Use an Z-Wave USB-stick with the QT OpenZWave Daemon.

Third Party Add-ons¶

Anyone can create an add-on, the following are created by the community.

  • SSH & Web Terminal - SSH and Web-based terminal with tons of pre-loaded useful tools.
  • UniFi Controller - The UniFi Controller allows you to manage your UniFi network using a web browser.
  • Node-RED - Flow-based programming for the Internet of Things.
  • Plex Media Server - Your recorded media beautifully organized and ready to stream.
  • IDE - Advanced web-based IDE, based on Cloud9 IDE.
  • Dasshio - Easily use your Amazon Dash Buttons.
  • InfluxDB - Scalable datastore for metrics, events, and real-time analytics.
  • Grafana - Open platform for beautiful analytics and monitoring.
  • Tor - Protect your privacy and access your instance via Tor.
  • Spotify Connect - Spotify Connect client for playing music on your Home Assistant device.
  • zigbee2mqtt - Zigbee to MQTT bridge, get rid of your proprietary Zigbee bridges.
  • AppDaemon - Python Apps and HADashboard.
  • TasmoAdmin - Centrally manage all your Sonoff-Tasmota devices.
  • Aircast - AirPlay capabilities for your Chromecast players.
  • AirSonos - AirPlay capabilities for your Sonos players.
  • Dropbox Sync - Upload your backup snapshots to Dropbox.
  • Log Viewer - Browser-based live log viewing utility.
  • Tautulli - Monitor and get statistics from your Plex server.
  • motionEye - Simple, elegant and feature-rich CCTV/NVR for your cameras.
  • JupyterLab Lite - Create documents containing live code, equations, visualizations, and explanatory text.
  • Backup to Google Drive - Backup snapshots to Google Drive.
  • ADB - The Android Debug Bridge server program.
  • Glances - A cross-platform system monitoring tool written in Python.
  • Matrix - A secure and decentralized communication platform.
  • AdGuard Home - A network-wide ad-and-tracker blocking DNS server with parental control.
  • Traccar - Traccar is modern GPS Tracking Platform.
  • Home Panel - A touch-compatible web frontend for controlling the home.
  • Hass.io Google Drive Backup - A complete and easy to configure solution for backing up your snapshots to Google Drive.
  • Grocy - ERP beyond your fridge! A groceries & household management solution for your home.

Lovelace User Interface¶

The Home Assistant frontend is already pretty, but you can customize it to fit your needs or taste better.


It is all about the looks, apply some style.

  • 📺 Themes Tutorial - Quick tutorial/example on how to configure themes.
  • Midnight - A dark theme by Marcel Hoffs.
  • Dark Cyan - A dark theme with cyan accents by Ryoen Deprouw.
  • Grey Night - A dark theme with grey accents by ksya.
  • Dark Red - A dark theme with red accents by Ryoen Deprouw.
  • Halloween - Pumpkins colored by Mahasri Kalavala.
  • Black and Green - A dark theme with pale green accents by GreenTurtwig.
  • Vintage - Give your frontend a vintage look with this theme by Anup Surendran.
  • Carbon Green - Light carbon theme with green accents by Reua.
  • 20 Great Themes - 20 Great themes by JuanMTech (includes a guide).
  • Many Themes, One Repo - 13 Themes in a convenient ZIP file.
  • Slate - A dark theme close to the vanila looks from seangreen2.
  • Synthwave - A theme influenced by the cover artwork of modern Synthwave bands.
  • Google Home Theme - Two themes (light and dark) matching the design of Google Home Hub.

Custom Lovelace UI Cards¶

Lovelace allows people to build custom cards on top of it, which you can easily add to your instance.

  • Auto-Entities Card - Dynamically adds entities: 🔮 Magic.
  • Canvas Gauge Card - Use awesome gauges from canvas-gauges.com.
  • Big Number Card - Display big numbers for sensors, including severity level as background.
  • Animated Weather Card - Nice looking card showing the weather, with subtle animations.
  • Thermostat Card - Thermostat control card that looks like a Nest Thermostat.
  • Mini Media Player - A minimalistic media player card.
  • Mini Graph Card - A minimalistic sensor graph card.
  • Button card - Button card for your entities.
  • Slideshow card - Dynamic slideshow of images or cards.
  • Swiper card - Flick/swipe through multiple cards.
  • Slider Entity Row - Add a slider to adjust, e.g., the brightness of lights in lovelace entity cards.
  • Power Wheel Card - An intuitive way to represent the power that your home is consuming or producing.
  • Simple Thermostat - A simpler and more flexible thermostat card.
  • Compact Custom Header - Customize and compact the frontend header bar.
  • Card Modder - Style your Lovelace cards.
  • Bar Card - Customizable animated bar card.
  • forked-daapd Card - Control a forked daapd instance.
  • Dual Gauge Card - Shows two gauges in one.
  • Atomic Calendar Card - Calendar card with advanced settings.
  • Xiaomi Vacuum Card - Detailed card for Xiaomi vacuum cleaners (and others).
  • Simple Weather Card - A minimalistic weather card, inspired by Google Material Design.
  • Lovelace Floorplan - Interaction with your entities from a Floorplan.
  • Home Card - A quick glance of the state of your home.
  • Banner Card - A fluffy linkable banner with interactive glances to spice up your home dashboards.
  • Upcoming Media Card - Display upcoming episodes and movies from services like: Plex, Kodi, Radarr, Sonarr, and Trakt.
  • Spotify Card - List and select from current available devices and users top playlists on Spotify.
  • Battery Entity - Displaying battery levels for battery entities.
  • Multiple Entity Row - Show multiple entity states or attributes on entity rows.
  • Xiaomi Vacuum Map Card - Interactive Xiaomi Vacuum map, just like in Mi Home app.
  • Home Feed Card - Display a combination of persistent notifications, calendar events, and entities in the style of a feed.
  • Config Template Card - Allow using templates in Lovelace.
  • RGB Light Card - Colorful buttons to control your RGB Lights.
  • LG WebOS Remote Control - Remote Control for LG TV WebOS.
  • Restriction Card - A card to provide restrictions on Lovelace cards defined within.
  • Vacuum Card — A card to card for controlling a vacuum cleaner robot.
  • Purifier Card — A card for controlling air purifiers.

Alternative Dashboards¶

  • TileBoard - A simple yet highly configurable Dashboard.

Custom Components¶

Additional components for Home Assistant, that were created by the community.

  • Hue Sensors - Enables the use of Philips Hue sensors.
  • Google Geocode - Converts a device tracker location into a human-readable address.
  • Lutron Caseta Pro - Integrates Lutron Caseta Smart Bridge PRO / RA2 Select.
  • SmartIR - Integrates devices using Broadlink IR.
  • Xiaomi Hygrothermo - Sensor platform for Xiaomi Mijia BT Hygrothermo temperature and humidity sensor.
  • Volkswagen Carnet - Integrates Volkswagen Carnet (requires valid Carnet subscription).
  • Untappd - Connects with your Untappd account.
  • Elasticsearch - Publishes events to Elasticsearch.
  • Sonoff/eWeLink - Control Sonoff/eWeLink smart devices using the stock firmware.
  • Alexa Media Player - Allow control of Amazon Alexa devices.
  • iCloud3 - Improved version of the iCloud device tracker component with a lot of capabilities.
  • HACS - This is a manager for your custom integration (components) and plugin (lovelace elements) needs.
  • breaking_changes - Component to show potential breaking_changes in the current published version based on your loaded components.
  • Circadian Lighting - Circadian Lighting slowly synchronizes your color changing lights with the regular naturally occuring color temperature of the sky throughout the day.
  • HASS Aarlo - Asynchronous Arlo integration. Similar to the Arlo web site; monitors events and states for all base stations, cameras and doorbells.
  • Xiaomi Cloud Map Extractor - This custom integration provides a way to present a live view of a map for a Xiaomi (and Roborock) vacuums without a need for rooting.


Do It Yourself; rather than buying home automation hardware or solutions, you could also build them yourself!

  • ESPHome - Program ESP8266 boards and ESP32 boards using YAML.
  • Magic Cards - RFID scannable cards that you can program to do anything.
  • Sonoff Tasmota - Firmware for ESP8266 boards and devices.

DIY Gateways¶

  • OpenMQTTGateway - A flexible MQTT gateway for IR, RF, BLE, MiFlora, SMS, and many sensors.
  • esp8266 Milight Hub - Alternative hub for Milight/LimitlessLED devices that uses MQTT.
  • zigbee2mqtt - Zigbee to MQTT bridge, get rid of your proprietary Zigbee bridges.

DIY Projects¶

  • HA SwitchPlate - LCD Touchscreen wall switch replacement.
  • 📺 DIY Multisensor - $15, Temperature, Humidity, Light, Motion, and RGB LED, without soldering.
  • $10 WiFi RGB Bulb - In inexpensive RGB bulb that works on WiFi.
  • 433mhz/IR Bidirectional Gateway - Bidirectional with IR and 433mhz using ESP8266 and MQTT.
  • esp8266MQTTBlinds - Automate your window blinds using an ESP8266, a servo and MQTT.
  • Home Assistant's Hackster.io - A Hackster channel with multiple DIY projects.
  • ESP MQTT Digital LEDs - WS2811 LED Stripe for the JSON Light Component from BRUH.
  • Bed Presence Detection - ESP8266 based Bed Presence Detection.
  • NFC Scanner - Build an NFC tag/card scanner with an ESP8266, PN532 and MQTT.
  • ESP32-Cam Facebox - Tie a ESP32-CAM, HA, and Facebox together for a cheap Facial Recog / Home monitoring solution.
  • RaspiPool - A cost-effective, easy-to-build, easy-to-use "Swimming-Pool Automation System".
  • QuinLED - DIY Wi-Fi LED dimmers and controllers using ESP32 boards.

Online Resources¶

Links to various users of Home Assistant that regularly publish Home Assistant focussed content.


YouTube Channels¶

Sit back, relax, watch, and learn.

  • BRUH - Ben has great tutorials for getting started, unfortunately, inactive lately.
  • BurnsHA - Great informational and tutorial videos.
  • DrZzs - Great how-to videos and also streams live.
  • The Hook Up - Tutorials and more, also has videos on home automation in general.
  • HASSCASTS - Tips, Tricks & Tutorials, moving to mainly live streams.
  • JuanMTech - Easy to follow how-to videos, product reviews and more.
  • vCloudInfo - Publishes videos based on his home and GitHub repository.
  • digiblurDIY - Tutorials on hardware projects and Tasmota automations.
  • Intermit.Tech - Tutorials & reviews: Camera's, Home Networking, ESP8266 boards, Node-RED.
  • BeardedTinker - Tutorials & 3D printing.
  • Smart Home Junkie - How-to videos and tutorials for starters and advanced users.


Get inspired, while commuting, doing your morning routine, or at the gym!

Keep up with the latest news and updates, 280 characters at a time!

  • @home_assistant - Open source home automation that puts local control and privacy first.
  • @hass_devs - Latest news on the development of Home Assistant for contributors.
  • @balloob - Founder of the Home Assistant project.
  • @pvizeli - Core developer and creator of the Hass.io project.
  • @frenck - Creator of this Awesome list and maintainer of the Community Hass.io Add-ons project.
  • @ccostan - Blogger of all things Tech. Smart Home, #IOT & other Geeky subjects.
  • @HomeTechHacker - Guy friends call when #tech happens. Tweet 25-50x/week about #smarthome, #homenetwork, #cybersecurity, #Linux, #gadgets, and #life.
  • @hassioaddons - For all commmunity add-on news and updates.
  • @Dr_Zzs - Great how-to videos and also streams live.


Valuable links, that don't fit in any of the above categories (yet!).

Alternative Home Automation Software¶

Home Assistant isn't the only home automation framework out there, here are some alternatives.

  • openHAB - Java-based and aims at being a universal integration platform.
  • Domoticz - A lightweight Home Automation System.
  • Gladys - Open source program which runs on your Raspberry Pi.
  • SmartThings - Commercial home automation hub by Samsung.

Other Awesome Lists¶

Other amazingly awesome lists that can be found on the great and dangerous interwebs.


This awesome list is an active open-source project and is always open to people who want to contribute to it. We have set up a separate document containing our Contribution Guidelines.

The original setup of this awesome list is by Franck Nijhof.

For a full list of all authors and contributors, check the contributor's page.

Thank you for being involved! 😍

Trademark Legal Notice¶

This Awesome list is not created, developed, affiliated, supported, maintained or endorsed by Home Assistant.

All product names, logos, brands, trademarks and registered trademarks are property of their respective owners. All company, product, and service names used in this list are for identification purposes only.

Use of these names, logos, trademarks, and brands does not imply endorsement.


Distributed under the Creative Commons Attribution 4.0 license. See LICENSE for the complete license.

Sours: https://www.awesome-ha.com/
  1. Tig hose
  2. Explorers connect
  3. Adjust dishwasher door
  4. Reddit total war

We have collection of more than 1 Million open source products ranging from Enterprise product to small libraries in all platforms. We aggregate information from all open source repositories. Search and find the best for your needs. Check out projects section.

custom-lovelace - Custom cards for Lovelace UI in Home Assistant

  •        3340

If you ended up using more cards and want to get update notifications and easier to use workflow you can use tracker-card. If this was the first time you created the www folder in your config than you MUST restart Home Assistant.



Related Projects

homeassistant-config - 🏡 My Home Assistant Configs

Here's my Home Assistant configuration. I have installed HA on an Intel NUC SkullCanyon with 32GB RAM and 500GB NVMe SSD. I am currently running Ubuntu 16.04 LTS on the NUC and used the virtual environment approach to install HA. I moved my entire configuration to Lovelace. Here are some screenshots (please note that these may not be the most updated images, but you should get an idea).


addons - :heavy_plus_sign: Docker add-ons for Home Assistant

Add-ons for Home Assistant, allow you to extend the functionality around your Home Assistant setup. These add-ons can consist of an application that Home Assistant can integrate with (e.g., a MQTT broker or database server) or allow access to your Home Assistant configuration (e.g., via Samba or using the Configurator). Add-ons can be installed and configured via the Home Assistant frontend on systems that have installed Home Assistant.

docker iot automation home hacktoberfest
Sours: https://www.findbestopensource.com/product/ciotlosm-custom-lovelace

Button Card by @RomRider

GitHub ReleaseHACS SupportedLicense

Project MaintenanceGitHub Activity

DiscordCommunity Forum

Lovelace Button card for your entities.




  • works with any toggleable entity
  • 6 available actions on tap and/or hold and/or double click: , , , , and
  • state display (optional)
  • custom color (optional), or based on light rgb value/temperature
  • custom state definition with customizable color, icon and style (optional)
  • custom size of the icon, width and height (optional)
  • aspect ratio support (optional)
  • Support for javascript templates in some fields
  • custom icon (optional)
  • custom css style (optional)
  • multiple layout support and custom layout support
  • units for sensors can be redefined or hidden
  • 2 color types
    • : apply color settings to the icon only
    • : apply color settings to the card only
  • automatic font color if color_type is set to
  • blank card and label card (for organization)
  • blink animation support
  • rotating animation support
  • confirmation popup for sensitive items (optional) or locking mecanism
  • haptic support for the IOS companion App
  • support for custom_updater and HACS


Main Options

NameTypeDefaultSupported optionsDescription
stringRequiredType of the card
stringoptionalany valid template from See configuration template
string or arrayoptionalentity_id list that would trigger a card update, see triggers_update
booleanfalse | When , if any of the entities triggering a card update is a group, it will auto-expand the group and the card will update on any child entity state change. This works with nested groups too. See triggers_update
stringoptionalIcon to display. Will be overridden by the icon defined in a state (if present). Defaults to the entity icon. Hide with . Supports templates, see templates
string | | | Color either the background of the card or the icon inside the card. Setting this to enable automatic and color. This allows the text/icon to be readable even if the background color is bright/dark. Additional color-type options and can be used for organisation (see examples).
stringoptional | | Color of the icon/card. sets the color based on the color of a light including the temperature of the light. Setting this to will behave like home-assistant's default, ignoring the temperature of the light. By default, if the entity state is , the color will be , for it will be and for any other state it will be . You can redefine each colors using
stringSize of the icon. Can be percentage or pixel
stringoptional, , , ...See here for an example. Aspect ratio of the card. being a square. This will auto adapt to your screen size
objectoptionalSee ActionDefine the type of action on click, if undefined, toggle will be used.
objectoptionalSee ActionDefine the type of action on hold, if undefined, nothing happens.
objectoptionalSee ActionDefine the type of action on double click, if undefined, nothing happens.
stringoptionalDefine an optional text to show below the icon. Supports templates, see templates
stringoptionalOverride the way the state is displayed. Supports templates, see templates
stringoptionalAny string that you wantDisplay a label below the card. See Layouts for more information. Supports templates, see templates
boolean | Wether to show the name or not. Will pick entity_id's name by default, unless redefined in the property or in any state property
boolean | Show the state on the card. defaults to false if not set
boolean | Wether to show the icon or not. Unless redefined in , uses the default entity icon from hass
boolean | Display or hide the units of a sensor, if any.
boolean | Display or hide the
boolean | Replace the label altogether and display the the attribute in a nice way (eg: )
boolean | Replace the icon by the entity picture (if any) or the custom picture (if any). Falls back to using the icon if both are undefined
boolean | Display the camera stream (if the entity is a camera). Requires the component to be enabled in home-assistant's config
stringoptionalCan be any of file or a URLWill override the icon/the default entity_picture with your own image. Best is to use a square image. You can also define one per state. Supports templates, see templates
stringoptional, , ...Override or define the units to display after the state of the entity. If omitted, it's using the entity's units
object listoptionalSee styles
stringoptionalSee styles
object listoptionalSee StateState to use for the color, icon and style of the button. Multiple states can be defined
objectoptionalSee confirmationDisplay a confirmation popup
objectoptionalSee Lock ObjectDisplays a lock on the button
stringoptionalSee LayoutThe layout of the button can be modified using this option
objectoptionalSee Custom Fields
objectoptionalSee Variables
number3Any numberConfigure the card size seen by the auto layout feature of lovelace (lovelace will multiply the value by about 50px)
stringoptionalAny string(Not supported on touchscreens) You can configure the tooltip displayed after hovering the card for 1.5 seconds . Supports templates, see templates


All the fields support templates, see templates.

NameTypeDefaultSupported optionsDescription
string, , , , , Action to perform
stringnoneAny entity idOnly valid for to override the entity on which you want to call
stringnoneEg: Path to navigate to (e.g. ) when action defined as navigate
stringnoneEg: URL to open on click when action is . The URL will open in a new tab
stringnoneAny serviceService to call (e.g. ) when defined as
objectnoneAny service dataService data to include (e.g. ) when defined as . If your requires an , you can use the keywork , this will actually call the service on the entity defined in the main configuration of this card. Useful for configuration templates
stringnone, , , , , , Haptic feedback for the Beta IOS App
numbernoneeg: For a hold_action, you can optionally configure the action to repeat while the button is being held down (for example, to repeatedly increase the volume of a media player). Define the number of milliseconds between repeat actions here.
objectnoneSee confirmationDisplay a confirmation popup, overrides the default object


This will popup a dialog box before running the action.

NameTypeDefaultSupported optionsDescription
stringnoneAny textThis text will be displayed in the popup. Supports templates, see templates
array of usersnoneAny user declared in this list will not see the confirmation dialog


confirmation: text: '[[[ return `Are you sure you want to toggle ${entity.attributes.friendly_name}?` ]]]'exemptions: - user: befc8496799848bda1824f2a8111e30a

Lock Object

This will display a normal button with a lock symbol in the corner. Clicking the button will make the lock go away and enable the button to be manoeuvred for seconds (5 by default).

NameTypeDefaultSupported optionsDescription
boolean | Enables or disables the lock. Supports templates, see templates
numberany numberDuration of the unlocked state in seconds
array of user id or usernamenone | Any user declared in this list will not see the confirmation dialog. It can be a user id () or a username ()
string | | The type of click which will unlock the button


lock: enabled: '[[[ return entity.state === 'on'; ]]]'duration: 10unlock: holdexemptions: - username: test - user: befc8496799848bda1824f2a8111e30a

If you want to lock the button for everyone and disable the unlocking possibility, set the exemptions object to :

lock: enabled: trueexemptions: []

By default the lock is visible in the upper-right corner. If you want to move the position of the lock to for example the bottom-right corner you can use this code:

styles: lock: - justify-content: flex-end - align-items: flex-end


NameTypeDefaultSupported optionsDescription
stringSee Available OperatorsThe operator used to compare the current state against the
string/numberrequired (unless operator is )If your entity is a sensor with numbers, use a number directly, else use a stringThe value which will be compared against the current state of the entity
stringoptionalAny string, , , ...if is , the name to display for this state. If defined uses the general config and if undefined uses the entity name. Supports templates, see templates
stringoptionalThe icon to display for this state - Defaults to the entity icon. Hide with . Supports templates, see templates
stringAny color, eg: or The color of the icon (if ) or the background (if )
stringoptionalSee styles
boolean | Should the icon spin for this state?
stringoptionalCan be any of file or a URLWill override the icon/the default entity_picture with your own image for this state. Best is to use a square image. Supports templates, see templates
stringoptionalAny string that you wantDisplay a label below the card. See Layouts for more information. Supports templates, see templates

Available operators

The order of your elements in the object matters. The first one which is will match. The field for all operators except support templating, see templates

Operator exampleDescription
Current state is inferior to
Current state is inferior or equal to
or This is the default if no operator is specified. Current state is equal ( javascript) to
Current state is superior or equal to
Current state is superior to
Current state is not equal ( javascript) to
regex applied to current state does match
See templates for examples. needs to be a javascript expression which returns a boolean. If the boolean is true, it will match this state
N/AIf nothing matches, this is used


This option enables you to modify the layout of the card.

It is fully compatible with every option. Make sure you set if you want to show the state

Multiple values are possible, see the image below for examples:

  • (default value if nothing is provided): Everything is centered vertically on top of each other
  • : Everything is aligned horizontally, name and state are concatenated, label is centered below
  • : Icon sits on top of name and state concatenated on one line, label below
  • : Icon and name are horizontally aligned, state and label are centered below
  • : Icon and state are horizontally aligned, name and label are centered below
  • : Icon and label are horizontally aligned, name and state are centered below
  • : Icon, name and state are horizontally aligned, name is above state, label below name and state
  • : Icon, name and state are horizontally aligned, state is above name, label below name and state


This field defines which entities should trigger an update of the card itself (this rule doesn't apply for nested cards in custom_fields as they are always updated with the latest state. This is expected and fast!). This was introduced in 3.3.0 to reduce the load on the frontend.

If you don't have javascript templates in your config, you don't need to do anything, else read further.

By default, the card will update itself when the main entity in the configuration is updated. In any case, the card will parse your code and look for entities that it can match (it only matches ) so:

returnstates['switch.myswitch'].state// will match switch.myswitch// butconsttest=switch.myswitchreturnstates[test].state// will not match anything

In this second case, you have 2 options:

  • Set the value of to (This was the behavior of button-card < 3.3.0)

  • Set the value of to a list of entities. When any of the entities in this list is updated, the card will be updated. The logic is the same as the internal home-assistant integration (see here for example):

    type: custom:button-cardentity: sensor.mysensor # No need to repeat this one in the triggers_update, it is added by defaulttriggers_update: - switch.myswitch - light.mylight

If your entity, any entity in the field or any entity matched from your templates are a group and you want to update the card if any of the nested entity in that group update its state, then you can set to . It will do the work for you and you won't have to specify manually the full list of entities in .

Javascript Templates

The template rendering uses a special format. All the fields where template is supported also support plain text. To activate the templating feature for such a field, you'll need to enclose the javascript function inside 3 square brackets:

Don't forget to quote if it's on one line:

name: '[[[ if (entity.state > 42) return "Above 42"; else return "Below 42" ]]]'name: > [[[ if (entity.state > 42) return "Above 42; else return "Below 42; ]]]

Those are the configuration fields which support templating:

  • (Supports also HTML rendering): This needs to return a string or an object
  • (Supports also HTML rendering): This needs to return a string or an object
  • (Supports also HTML rendering): This needs to return a string or an object
  • : This needs to return a path to a file or a url as a string.
  • : This needs to return a string in the format
  • All the styles in the style object: This needs to return a string
  • All the value of the state object, apart from when the operator is
    • : The function for needs to return a boolean
    • Else: The function for needs to return a string or a number
  • All the (Support also HTML rendering): This needs to return a string or an object
  • All the : Each entry needs to return a string (See here for some examples)
  • The field
  • Everything field in
  • The confirmation text ()
  • The lock being enabled or not ()
  • all the parameters in a
  • all the

Inside the javascript code, you'll have access to those variables:

  • : The button-card element itself (advanced stuff, don't mess with it)
  • : The current entity object, if the entity is defined in the card
  • : An object with all the states of all the entities (equivalent to )
  • : The user object (equivalent to )
  • : The complete object
  • : an object containing all your variables defined in the configuration. See Variables

See here for some examples or here for some crazy advanced stuff using templates!


All the styles entries, support Templating, see here for some examples.

Easy styling options

For each element in the card, styles can be defined in 2 places:

  • in the main part of the config
  • in each state

Styles defined in each state are additive with the ones defined in the main part of the config. In the part, just define the ones specific to your current state and keep the common ones in the main part of the config.

The object members are:

  • : styles for the card itself. Styles that are defined here will be applied to the whole card and its content, unless redefined in elements below.
  • : styles for the icon
  • : styles for the picture (if any)
  • : styles for the name
  • : styles for the state
  • : styles for the label
  • : styles for the lock icon (see here for the default style)
  • : styles for the tooltip overlay (see here)
  • : styles for each of your custom fields. See Custom Fields
- type: custom:button-card[...]styles: card: - xxxx: valueicon: - xxxx: valueentity_picture: - xxxx: valuename: - xxxx: valuestate: - xxxx: valuelabel: - xxxx: valuestate: - value: 'on'styles: card: - yyyy: valueicon: - yyyy: valueentity_picture: - yyyy: valuename: - yyyy: valuestate: - yyyy: valuelabel: - yyyy: value

This will render:

  • The with the styles and applied
  • Same for all the others.

See styling for a complete example.

Light entity color variable

If a light entity is assigned to the button, then:

  • the CSS variable will contain the current light color
  • the CSS variable will contain the current light without the temperature

You can use them both in other parts of the button. When off, it will be set to


styles: name: - color: var(--button-card-light-color)card: - -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color) - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)

ADVANCED styling options

For advanced styling, there are 2 other options in the config object:

  • : mainly layout for the grid
  • : mainly how you position your icon in its cell

This is how the button is constructed (HTML elements):

elements in the button

The element uses CSS grids to design the layout of the card:

  • element is going to the by default
  • element is going to the by default
  • element is going to the by default
  • element is going to the by default

You can see how the default layouts are constructed here and inspire yourself with it. We'll not support advanced layout questions here, please use Home Assistant's community forum for that.

Sours: https://github.com/custom-cards/button-card

Assistant cards home lovelace custom

Lovelace: Custom Cards

Lovelace is our approach to defining your user interface for Home Assistant. We offer a lot of built-in cards, but you're not just limited to the ones that we decided to include in the Lovelace UI. You can build and use your own!

Defining your card#

This is a basic example to show what's possible.

Create a new file in your Home Assistant config dir as and put in the following contents:

Referencing your new card#

In our example card we defined a card with the tag (see last line), so our card type will be . And because you created the file in your directory, it will be accessible in your browser via the url (if you have recently added the www folder you will need to re-start Home Assistant for files to be picked up).

Add a resource to your Lovelace configuration with URL and type (resource docs).

You can then use your card in your Lovelace configuration:


Custom cards are defined as a custom element. It's up to you to decide how to render your DOM inside your element. You can use Polymer, Angular, Preact or any other popular framework (except for React – more info on React here).

Home Assistant will call when the configuration changes (rare). If you throw an exception if the configuration is invalid, Lovelace will render an error card to notify the user.

Home Assistant will set the property when the state of Home Assistant changes (frequent). Whenever the state changes, the component will have to update itself to represent the latest state.

Your card can define a method that returns the size of your card as a number or a promise that will resolve to a number. A height of 1 is equivalent to 50 pixels. This will help Home Assistant distribute the cards evenly over the columns. A card size of will be assumed if the method is not defined.

Since some elements can be lazy loaded, if you want to get the card size of another element, you should first check it is defined.

Your card can define a method that returns a custom element for editing the user configuration. Home Assistant will display this element in the card editor in Lovelace.

Advanced example#

Resources to load in Lovelace are imported as a JS module import. Below is an example of a custom card using JS modules that does all the fancy things.

Screenshot of the wired card

Create a new file in your Home Assistant config dir as and put in the following contents:

Add a resource to your Lovelace config with URL and type .

And for your configuration:

Graphical card configuration#

Your card can define a method that returns a custom element for editing the user configuration. Home Assistant will display this element in the card editor in Lovelace.

Your card can also define a method that returns a default card configuration (without the parameter) in json form for use by the card type picker in Lovelace.

Home Assistant will call the method of the config element on setup. Home Assistant will update the property of the config element on state changes, and the element, which contains information about the lovelace configuration.

Changes to the configuration are communicated back to lovelace by dispatching a event with the new configuration in its detail.

To have your card displayed in the card picker dialog in Lovelace, add an object describing it to the array . Required properties of the object are and (see example below).

Advanced Resources#

Community Maintained Boilerplate Card - Advanced Template (Typescript, Rollup, Linting, etc.)

Developer Documentation for HACS (Home Assistant Community Store).

Sours: https://developers.home-assistant.io/docs/frontend/custom-ui/lovelace-custom-card/
Room Overview Lovelace Dashboard


Lovelace is the Home Assistant dashboard. It is a fast, customizable and powerful way for users to manage their home using their mobiles and desktops.

  • 29 different cards to place and configure as you like.
  • Dashboard Editor: Allows you to manage your Lovelace dashboard by including a live preview when editing cards.
  • Fast: Using a static configuration allows us to build up the dashboard once.
  • Customizable:
    • Cards have a number of options which help to configure your data as required.
    • Themes (even at a per card basis).
    • Ability to override names and icons of entities.
    • Custom Cards from our amazing community are fully supported.

To start, go to the Home Assistant Overview page, click on the three dots at the top right of the screen and select ‘Edit Dashboard’. Then click on the blue ‘+ Add Card’ icon at the bottom right and select a card to add.

To try it yourself, check out the demo.

Discuss Lovelace

Additional Lovelace Resources

Sours: https://www.home-assistant.io/lovelace/

You will also be interested:


462 463 464 465 466