Lovelace: Button card

Button card

Lovelace Button card for your entities. -> github

all

Features

  • works with any toggleable entity
  • 3 actions on tap toggle, more_info and service
  • state display (optional)
  • custom color for on and off state (optional)
  • custom state definition with customizable color (optional)
  • custom size (optional)
  • custom icon (optional)
  • custom css style (optional)
  • automatic color for light (optional)
  • custom default color for lights (when color cannot be determined) (optional)
  • 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
  • support unit of measurement
  • blank card and label card (for organization)
  • support for custom_updater

Options

Name Type Default Supported options Description
type string Required custom:button-card Type of the card
entity string Required switch.ac entity_id
icon string optional mdi:air-conditioner | attribute Icon to display in place of the state. If you use attribute it will fetch the icon configured on the entity.
color_type string icon icon | card | blank-card | label-card Color either the background of the card or the icon inside the card. Setting this to card enable automatic font and icon color. This allows the text/icon to be readable even if the background color is bright/dark. Additional color-type options blank-card and label-card can be used for organisation (see examples).
color string var(--primary-text-color) auto | rgb(28, 128, 199) Color of the icon/card when state is on. auto sets the color based on the color of a light.
color_off string var(--disabled-text-color) rgb(28, 128, 199) Color of the icon/card when state is off.
size string 40% 20px Size of the icon. Can be percentage or pixel
action string toggle toggle | more_info | service Define the type of action
service Object optional See example section Service to call and service data when action is set to service
name string optional Air conditioner Define an optional text to show below the icon
show_state boolean false true | false Show the state on the card. defaults to false if not set
style object optional - text-transform: none Define a list of css attribute and their value to apply to the card
state list optional See example section State to use for the color of the button. Multiple states can be defined

Instructions

  1. Download the button-card
  2. Place the file in your config/www folder
  3. Include the card code in your ui-lovelace-card.yaml
title: Home
resources:
  - url: /local/button-card.js
    type: module
  1. Write configuration for the card in your ui-lovelace.yaml

To configure custom_updater with button-card

custom_updater:
  card_urls:
    - https://raw.githubusercontent.com/kuuji/button-card/master/tracker.json

Examples

Show a button for the air conditioner (blue when on):

ac

- type: "custom:button-card"
  entity: switch.ac
  icon: mdi:air-conditioner
  color: rgb(28, 128, 199)

Show an ON/OFF button for the home_lights group:

no_icon

- type: "custom:button-card"
  entity: group.home_lights
  show_state: true

Light entity with custom icon and “more info” pop-in:6

sofa

- type: "custom:button-card"
  entity: light.living_room_lights
  icon: mdi:sofa
  color: auto
  action: more_info

Light card with text:

text

- type: "custom:button-card"
  entity: light.living_room_lights
  icon: mdi:sofa
  color: auto
  name: Living room

Light card with text and custom style:

home-custom

- type: "custom:button-card"
  entity: light._
  icon: mdi:home
  color: auto
  action: more_info
  name: Home
  style:
    - text-transform: none
    - color: rgb(28, 128, 199)
    - font-weight: bold

Light card with card color type, name, and automatic color:

color

- type: "custom:button-card"
  entity: light._
  icon: mdi:home
  color: auto
  color_type: card
  default_color: rgb(255, 233, 155)
  action: more_info
  name: Home
  style:
    - font-size: 12px
    - font-weight: bold

Horizontal stack with :

  • 2x blank cards
  • 1x volume up button with service call
  • 1x volume down button with service call
  • 2x blank cards

volume

- type: horizontal-stack
  cards:
    - type: "custom:button-card"
      color_type: blank-card
    - type: "custom:button-card"
      color_type: blank-card
    - type: "custom:button-card"
      color_type: card
      color: rgb(223, 255, 97)
      icon: mdi:volume-plus
      action: service
      service:
        domain: media_player
        action: volume_up
        data:
          entity_id: media_player.livimg_room_speaker
    - type: "custom:button-card"
      color_type: card
      color: rgb(223, 255, 97)
      icon: mdi:volume-minus
      action: service
      service:
        domain: media_player
        action: volume_down
        data:
          entity_id: media_player.livimg_room_speaker
    - type: "custom:button-card"
      color_type: blank-card
    - type: "custom:button-card"
      color_type: blank-card

Credits

  • ciotlosm for the readme template and the awesome examples

Edit :

  • New release! 0.0.1 is out.
  • 0.0.2 is out with custom service, blank card, and custom_updater support
  • 0.0.3 Custom state, label card and icon attribute
98 Likes
Lovelace as a Dashboard
Lovelace with custom_ui tiles
Lovelace button card (capital letters and blank cards)
Custom UI: Tiles
Lovelace: mini graph card
My Lovelace Plugins
Glance Card | Change Icon Color based on state
Ariela - Home Assistant Android Client
Ways of `mimicking` standard Lovelace elements in custom cards (like button-card), anyone?
Palm Springs Theme
Tap to show more-info of a different entity
Lovelace: alternative to multiple entity row?
Is it possible to use PNG icon in Entity Button Card
Custom Component - ESXi Stats
LIFX Smooth Color changing
Lovelace light control ideas wanted
Kodi Remote
Custom Lovelace Card - Homekit style card
Super Simple question....!
Clean Tile-Based Lovelace UI - only 2 cards needed!
Venetian Blind Icons
Hue scenes mimicked in Ha (and on Buttons, was Tiles)
Fun with cutom:button-card
A different take on designing a Lovelace UI
iTunes Switches for AirPlay or Playlists
How to create "Empty Row" or more spacing between 2 Buttons
Need help with picture Elements card CSS style
Color Custom Button Cards based on Attribute States
Media player in lovelace
🔹 Card-mod - Add css styles to any lovelace card
Button card that is blank?
Showing 3-Way Switches in the GUI
[HELP] Display number of lights on
Lovelace: Simple thermostat card
Fun with cutom:button-card
Harmony Activities, Volume Slider, and Lovelace
Button background color based on value (range)
Best way to manage visually an input_select linked to scene in lovelace?
Best way to manage visually an input_select linked to scene in lovelace?
Klick, Jump, Link to tab from 1st tab
Circadian Lighting [Custom Component]
Getting switch state in Entity Button Card
Color of active devices
Table like clickable PNGs to publish MQTT
How do I actually make a TV Remote Control work well in the GUI
Change entity color based on its state
Custom Lovelace Card - Homekit style card
How to make state_color: true global?
Custom UI: Tiles
Custom UI: Tiles
Change switch states from on/off in front end
Lovelace more then one Custom cards for one entity
Change icons on card and remove extra buttons
Custom UI: Tiles
Sonoff /eWeLink component for original firmware
How to change the displayed name of switch state

this is awesome! great work

4 Likes

thank you, this looks amazing…

2 Likes

@kuuji Fantastic work! Any chance you can share the code for the layout you have in the first post? Really like the format / spacing setup :slight_smile:

1 Like

Very nice! Just what I’ve been waiting for to jump on the Lovelace train :grinning:
If only we could pass data values like we used to in Custom UI: Cards :slight_smile:

  - entity: script.press_button
    icon: mdi:arrow-left-thick
    column: 1
    row: 5
    data:
      value: left
3 Likes

@kuuji (Alexandre) thank you for these great cards.
Please consider adding the below card tracker component code, as it’s a practical way of keeping up with your latest release.

3 Likes

Excellent start!!

Couple of things:

  1. Can the icon also use a regular image? Not all icons are available on mdi. For example, I would like to have buttons for my favorite TV channels (Discovery, CNN, etc.).
  2. Also, can we also allow calling services in action? We already have that feature in many LL cards, so should be easy to replicate the functionality here.
4 Likes

Thanks for the suggestion @arsaboo . Adding that to my todo list :wink:

1 Like

@Igor_Jurisic not exactly sure what that does. Could you elaborate?

Thanks @juan11perez! That’s awesome. I’ll include the json and link to the tracker card/component in my readme :wink:

loving this card… but been trying to display on a raspberry pi with the 7" touchscreen, but keep getting “custom element doesn’t exist: button-card” could very well be me and nothing to do with the code, or it just isn’t compatible with the browser on the pi. working very well on other browsers. thanks again for all the work.

Just wondering how you put the text underneath each button “Main”, “Wardrobe” etc?

This is my configuration with name under icon’s:

      - type: "custom:button-card"
        entity: switch.kino_on_off
        icon: mdi:power-standby
        name: Soundbar
        color: rgb(28, 128, 199)

Ahhh “name:” was just thinking I hadn’t tried that…thanks mate!

@ashsav could you open the developer tools, go to the console, and tell me if you see any error.
It might just be slow to load on a raspberry Pi, have you tried waiting a bit?

Thanks for the reply, this is all I get

don’t think this is an error relating to my problem, but my web skills are limited. yeah I did try and wait, but no change.

I forked your project and I Improved it a little, if you like my edits you are free to add to your branch :slight_smile:

@jackar Feel free to open a PR. It’ll be easier for me to see what you change and to merge it into mine :wink:

1 Like

Beautiful, great work.

1 Like

Great job, was what I needed to stop using “custom-ui-tiles”.
But you still need a button with the name only (no icon and no state).

1 Like