jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-25 02:07:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Button card documentation (#13807)

Browse Source 
Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
Co-authored-by: Zack Barett <zackbarett@hey.com>
Co-authored-by: Franck Nijhof <frenck@frenck.dev>
This commit is contained in:
Cadi 2020-11-21 06:45:46 +13:00 committed by GitHub
parent 0fca81f68f
commit 4a417a16f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
source/_lovelace/button.markdown
View File

@ -7,18 +7,38 @@ description: "The Button card allows you to add buttons to perform tasks."
The Button card allows you to add buttons to perform tasks. The Button card allows you to add buttons to perform tasks.
<p class='img'> <p class='img'>
<img src='/images/lovelace/lovelace_entity_button_card.png' alt='Screenshot of the button card'> <img src='/images/lovelace/lovelace_entity_button_card.png' alt='Screenshot of three Button Cards'>
Screenshot of the Button card. Screenshot of three Button Cards.
</p> </p>
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. 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.
Alternatively, the card can be configured using YAML: ## Card Settings
```yaml {% configuration_basic %}
type: button Entity:
entity: light.living_room description: The entity ID the card interacts with, for example, `light.living_room`.
``` Name:
description: 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:
description: 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:
description: A toggle to show or hide the button name.
Show Icon:
description: A toggle to show or hide the icon.
Icon Height:
description: The height of the icon, in pixels.
Theme:
description: The card theme, which may be set to any installed theme. For more information about themes, see the [frontend documentation](https://www.home-assistant.io/integrations/frontend/).
Tap Action:
description: The action taken on card tap. For more information, see the [action documentation](/lovelace/actions/#tap-action).
Hold Action:
description: The action taken on card tap and hold. For more information, see the [action documentation](/lovelace/actions/#hold-action).
{% endconfiguration_basic %}
### YAML
This is for if you use YAML mode or prefer to use YAML in the Code Editor in the UI.
{% configuration %} {% configuration %}
type: type:
@ -27,26 +47,26 @@ type:
type: string type: string
entity: entity:
required: false required: false
description: Home Assistant entity ID. description: The entity ID the card interacts with, for example, `light.living_room`.
type: string type: string
name: name:
required: false required: false
description: Overwrites friendly name. description: 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.
type: string type: string
default: Name of Entity default: Entity name
icon: icon:
required: false required: false
description: Icon that will be be used to overwrite the entity picture or entity icon. description: 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.
type: string type: string
default: Entity Domain Icon default: Entity Domain Icon
show_name: show_name:
required: false required: false
description: Show name. description: If false, the button name is not shown on the card.
type: boolean type: boolean
default: "true" default: "true"
show_icon: show_icon:
required: false required: false
description: Show icon. description: If false, the icon is not shown on the card.
type: boolean type: boolean
default: "true" default: "true"
show_state: show_state:
@ -56,44 +76,51 @@ show_state:
default: "false" default: "false"
icon_height: icon_height:
required: false required: false
description: Set the height for the icon. This is in pixels which is handled by the configuration UI. (Advanced users can use other CSS values if they like) description: The height of the icon. Any CSS value may be used.
type: string type: string
default: auto default: auto
state_color: state_color:
required: false required: false
description: Set to `true` to have icons colored when entity is active description: If false, the icon does not change color when the entity is active.
type: boolean type: boolean
default: true default: true
tap_action: tap_action:
required: false required: false
description: Action taken on card tap. See [action documentation](/lovelace/actions/#tap-action). description: The action taken on card tap. For more information, see the [action documentation](/lovelace/actions/#tap-action).
type: map type: map
hold_action: hold_action:
required: false required: false
description: Action taken on card tap and hold. See [action documentation](/lovelace/actions/#hold-action). description: The action taken on card tap and hold. For more information, see the [action documentation](/lovelace/actions/#hold-action).
type: map type: map
double_tap_action: double_tap_action:
required: false required: false
description: Action taken on card double tap. See [action documentation](/lovelace/actions/#double-tap-action). description: The action taken on card double-tap. For more information, see the [action documentation](/lovelace/actions/#double-tap-action).
type: map type: map
theme: theme:
required: false required: false
description: "Set to any theme within `themes.yaml`" description: The card theme, which may be set to any theme from the `themes.yaml` file. For more information about themes, see the [frontend documentation](https://www.home-assistant.io/integrations/frontend/).
type: string type: string
{% endconfiguration %} {% endconfiguration %}
Example:
```yaml
type: button
entity: light.living_room
```
## Options For Exemptions ## Options For Exemptions
{% configuration badges %} {% configuration badges %}
user: user:
required: true required: true
description: User id that can see the view tab. description: The id of the user that can see the view tab.
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## Examples ## Examples
Title and Script Service Example: Button Card with a button name and a script that runs when card is tapped:
```yaml ```yaml
type: button type: button
@ -107,6 +134,6 @@ tap_action:
``` ```
<p class='img'> <p class='img'>
<img src='/images/lovelace/lovelace_entity_button_complex_card.png' alt='Screenshot of the button card'> <img src='/images/lovelace/lovelace_entity_button_complex_card.png' alt='Screenshot of the Button card with Script Service'>
Screenshot of the Button card with Title and Script Service. Screenshot of the Button card with Script Service.
</p> </p>