Button Card by @RomRider

Useful links

• Stable version documentation
• Dev version documentation
• HA Discord
• button-card forum thread

Installation

This fork is not in the HACS default store — add it as a custom repository.

HACS

1. HACS → ⋮ (top right) → Custom repositories
2. Repository: foXaCe/button-card — Type: Dashboard
3. Install button-card, then reload your browser (the resource is added automatically)

Manual

1. Download button-card.js from the latest release
2. Copy it to <config>/www/
3. Add a dashboard resource pointing to /local/button-card.js as a JavaScript Module

What is custom:button-card?

This is a lovelace custom card called button-card for your entities with a LOT of configuration options.

• works with any entity
• 6 available actions on tap and/or hold and/or double click: none, toggle, more-info, navigate, url, assist and call-service
• icon tap action: Separate action when clicking the icon specifically which takes precedence over main card actions.
• momentary actions for the card and/or icon: press_action and release_action (if used, replaces default actions)
• 3 button-card custom actions: javascript, multi-actions, toast
• state display (optional)
• custom color (optional), or based on light rgb value/temperature
• custom state definition with customizable color, icon and style
• custom size of the icon, width and height
• aspect ratio support
• Support for javascript templates
• custom icon
• custom css style
• multiple layout support and custom layout support
• units for sensors can be redefined or hidden
• 2 color types
  • icon : apply color settings to the icon only
  • card : apply color settings to the card only
• automatic font color if color_type is set to card
• blank card and label card (for organization)
• Native blink animation support
• icon rotation animation support
• confirmation popup for sensitive items or locking mecanism
• password or PIN protection for actions
• haptic support for the IOS companion App
• support for HACS