# Création d'un bouton personnalisé

**URL:** <https://forum.hacf.fr/t/creation-dun-bouton-personnalise/28911>\
**Category:** Entraide Home Assistant\
**Tags:** interface-lovelace, button-card\
**Created:** [Octobre 5, 2023, 2:45 UTC](https://forum.hacf.fr/t/creation-dun-bouton-personnalise/28911 "2023-10-05T02:45:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexb81](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/3ec8ea/32.png) [@alexb81](https://forum.hacf.fr/u/alexb81)\
**Post date:** [Octobre 5, 2023, 2:45 UTC](https://forum.hacf.fr/t/creation-dun-bouton-personnalise/28911/1 "2023-10-05T02:45:13Z")

</div>

Bonjour,

Ce matin, je vous soumets une nouvelle incompréhension de lovelace

Je cherche à fabriquer une tuile qui afficherai grosso-modo:  
Name statut

Actuellement, j'obtiens  
name  
statut

J'ai tenté de comprendre la documentation [ici](https://github.com/custom-cards/button-card#State)

j'ai donc tenté de m'y mettre mais je ne dois pas avoir compris le concept. Si quelqu'un peu m'expliquer, j'aimerai faire de jolie tuile comme dans la doc.

Voici ce que j'ai testé

```auto
type: custom:button-card
show_name: true
entity: sensor.sun_next_rising
name: Levé du soleil
show_icon: false
tap_action:
  action: none
show_state: true
hold_action:
  action: none
styles:
  grid:
    - grid-template-areas: '"n" "s"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: auto
    - column-gap: 50px; "Ecart entre 2 colonnes

  statut:
    - align-self: start
    - justify-self: end
    - font-size: 10px
  name:
    - font-size: 24px

state: 
  - name: '[[[return entity.state]]]'

```

ce qui me donne  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/f/b/fb6bb630d2c7f9ba68a72164557a3111c316e660.png)

j'aimerai comprendre comment positionner le statut sur la même ligne et à droite du nom. Il y a forcément un truc que j'ai pas bien fait/compris.

Merci à vous

---

<div class="post-metadata">

**Author:** ![anon41081891](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/e9c0ed/32.png) [@anon41081891](https://forum.hacf.fr/u/anon41081891)\
**Post date:** [Octobre 5, 2023, 4:57 UTC](https://forum.hacf.fr/t/creation-dun-bouton-personnalise/28911/2 "2023-10-05T04:57:28Z")

</div>

C’est les guillemets qui ne sont pas correctement positionnés

```auto
- grid-template-areas: '"n s"'

```

---

<div class="post-metadata">

**Author:** ![alexb81](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/3ec8ea/32.png) [@alexb81](https://forum.hacf.fr/u/alexb81)\
**Post date:** [Octobre 5, 2023, 5:34 UTC](https://forum.hacf.fr/t/creation-dun-bouton-personnalise/28911/3 "2023-10-05T17:34:32Z")

</div>

Salut super merci

buter sur si peu quelle loose.  
Par hasard, j’ai vu dans différent tuto cette valeur 1fr sans que je ne trouve à quoi ça correspond. Tu le sais?

---

<div class="post-metadata">

**Author:** ![anon41081891](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/e9c0ed/32.png) [@anon41081891](https://forum.hacf.fr/u/anon41081891)\
**Post date:** [Octobre 6, 2023, 2:23 UTC](https://forum.hacf.fr/t/creation-dun-bouton-personnalise/28911/4 "2023-10-06T14:23:31Z")

</div>

Non, je pense qu'il s'agit d'une fraction de la taille de la carte : par exemple, avec une seule colonne dans la carte, celle-ci prendra 100% de la largeur de la carte (éventuellement moins le padding à gauche et à droite. Avec deux colonnes, chacune d'elles prendront 50% de la largeur de la carte (moins le padding et l'espace entre les colonnes). Avec 3 colonnes, 33% etc. Mais je ne peux rien affirmer.  
Après, il y a d'autres valeurs possibles :

- "min-content" qui ajuste la taille de la colonne ou de la ligne au minimum en fonction du contenu de la colonne ou ligne.
- "x%" en pourcentage de la largeur ou de la hauteur de la carte.
- "0.xFR" (0.5FR = 1/2 de la largeur de 1FR)...

 ![image](https://forum.hacf.fr/uploads/default/original/3X/e/d/ed73ff386a5575ae98cd99c7e8d90208db90a794.png)

---

<div class="post-metadata">

**Author:** ![alexb81](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/3ec8ea/32.png) [@alexb81](https://forum.hacf.fr/u/alexb81)\
**Post date:** [Octobre 6, 2023, 5:30 UTC](https://forum.hacf.fr/t/creation-dun-bouton-personnalise/28911/5 "2023-10-06T17:30:22Z")

</div>

Merci pour ces explications il me reste donc à faire ma mise en page.

Bonne soirée