Button Card


The Button card allows you to add buttons to perform tasks.

Screenshot of three Button Cards Screenshot of three Button Cards.

To add the Button card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then Edit Dashboard. Click the plus button in the bottom right corner and select Button from the card picker. All options for this card can be configured via the user interface.

Card Settings

Entity

The entity ID the card interacts with, for example, light.living_room.

Name

The button name that is displayed on the card. If this field is left blank and the card interacts with an entity, the button name defaults to the entity name. Otherwise, no name is displayed.

Icon

The icon that is displayed on the card. If this field is left blank and the card interacts with an entity, the icon defaults to the entity domain icon. Otherwise, no icon is displayed.

Show Name

A toggle to show or hide the button name.

Show Icon

A toggle to show or hide the icon.

Icon Height

The height of the icon, in pixels.

Theme

The card theme, which may be set to any installed theme. For more information about themes, see the frontend documentation.

Tap Action

The action taken on card tap. For more information, see the action documentation.

Hold Action

The action taken on card tap and hold. For more information, see the action documentation.

YAML

This is for if you use YAML mode or prefer to use YAML in the Code Editor in the UI.

Configuration Variables

type string Required

button

entity string (Optional)

The entity ID the card interacts with, for example, light.living_room.

name string (Optional, default: Entity name)

The button name that is displayed on the card. It defaults to the entity name only if the card interacts with an entity. Otherwise, if not configured, no name is displayed.

icon string (Optional, default: Entity Domain Icon)

The icon that is displayed on the card. It defaults to the entity domain icon only if the card interacts with an entity. Otherwise, if not configured, no icon is displayed.

show_name boolean (Optional, default: true)

If false, the button name is not shown on the card.

show_icon boolean (Optional, default: true)

If false, the icon is not shown on the card.

show_state boolean (Optional, default: false)

Show state.

icon_height string (Optional, default: auto)

The height of the icon. Any CSS value may be used.

state_color boolean (Optional, default: true)

If false, the icon does not change color when the entity is active.

tap_action map (Optional)

The action taken on card tap. For more information, see the action documentation.

hold_action map (Optional)

The action taken on card tap and hold. For more information, see the action documentation.

double_tap_action map (Optional)

The action taken on card double-tap. For more information, see the action documentation.

theme string (Optional)

The card theme, which may be set to any theme from the themes.yaml file. For more information about themes, see the frontend documentation.

Example:

type: button
entity: light.living_room

Options For Exemptions

Configuration Variables

user string Required

The id of the user that can see the view tab.

Examples

Button Card with a button name and a script that runs when card is tapped:

type: button
name: Turn Off Lights
show_state: false
tap_action:
  action: call-service
  service: script.turn_on
  service_data:
    entity_id: script.turn_off_lights

Screenshot of the Button card with Script Service Screenshot of the Button card with Script Service.