# Button (Bouton) Un bouton est juste quelque chose sur lequel vous pouvez cliquer pour effectuer une action. Cette action peut aller de la navigation vers un autre écran, à l'enregistrement d'informations dans une base de données, ou à la diffusion d'un son. ![](https://lh4.googleusercontent.com/IvA0mRVV2yRI4N6HwzArmFURm20PWm_S6aYMjVKxtlBJjS1mN6KhSeLtCWlovQ7R7rye6Ymjbr-DXzWb36E8aUTyTbxGul38Ahjy90o9m4efAiPXKs0ZGU-exydjIKzowZsjg-bo) Les blocs ci-dessus indiquent que lorsque l'on clique sur le bouton 1, on passe à l'écran 2. ## Vue d'ensemble * [Vidéo Tutorielle](/thunkable/components/user-interface/button.md#video-tutorial) * [Style du bouton](/thunkable/components/user-interface/button.md#style-the-button) * [Modifier la taille du bouton](/thunkable/components/user-interface/button.md#edit-the-button-size) * [Ajouter un espacement](/thunkable/components/user-interface/button.md#add-spacing) * [Programmation du bouton](/thunkable/components/user-interface/button.md#programming-the-button) ![](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6D3tN_qKmJHKmZao%2Fbutton-%E2%9C%95-fig-1.png?alt=media) ## Vidéo Tutorielle {% embed url="" %} ## Style du Bouton Vous disposez de nombreuses options pour donner du style à votre bouton, comme par exemple changer la couleur de fond ou la couleur du texte. Voici les différentes options de personnalisation : * **Text:** Texte qui apparaît sur le bouton * **Text Color:** Couleur du texte qui apparaît sur le bouton * **Background Color:** Définit la couleur de fond du bouton * **Font Size:** Taille du texte qui apparaît sur le bouton * **Background Picture:** Téléchargez une image qui apparaît sur le bouton. * **Background Picture Resize Mode** * **Cover:** Remplit l'ensemble du bouton sans modifier le ratio hauteur et largeur de l'image * **Contain:** L'image entière sera réduite pour tenir à l'intérieur du bouton, sans modifier le rapport entre la hauteur et la largeur de l'image * **Stretch:** La hauteur de l'image change pour remplir le bouton dans le sens de la longueur * **Repeat:** Répétez l'image pour couvrir le bouton. Le rapport entre la hauteur et la largeur de l'image ne changera pas * **Center:** Positionne l'image au milieu du bouton * **Visible:** Pour voir le bouton dans votre application, réglez le commutateur sur "True" * **Border** * **Width:** Indiquez la largeur que vous souhaitez donner à la bordure du bouton * **Color:** Choisissez une couleur pour la bordure du bouton * **Style:** Choisissez si vous souhaitez que la bordure soit en pointillés, en tirets ou en traits pleins * **Radius:** Indiquez le contour que vous souhaitez pour les bords de la bordure du bouton * **Font Bold:** Pour que le texte du bouton soit en gras, mettez le commutateur sur "True". * **Font Italic:** Pour que le texte du bouton soit en italique, réglez le commutateur sur "True" * **Raised:** Pour jeter une ombre sur le bouton, réglez l'interrupteur sur "True" * **Disabled:** Pour éviter que le bouton n'exécute une option lorsqu'on clique dessus, réglez l'interrupteur sur "True" ## Modifier la taille du bouton Vous pouvez définir la hauteur du bouton en utilisant la propriété "Height" et la largeur du bouton en utilisant la propriété "Width". **Height** * **Fill container -** Le bouton remplit tout l'écran verticalement * **Fit contents -** La hauteur du bouton change en fonction de la taille du contenu qu'il contient * **Relative size -** Le bouton remplit le pourcentage spécifié de l'écran * **Absolute size -** Dimensionne le bouton à un nombre de pixels déterminé **Width** * **Fill container -** Le bouton remplit tout l'écran horizontalement * **Fit contents -** La largeur du bouton change en fonction de la taille du contenu qu'il contient * **Relative size -** Le bouton remplit le pourcentage spécifié de l'écran * **Absolute -** Dimensionne le bouton à un nombre de pixels déterminé ## Ajouter un espacement Vous modifiez l'espacement et le positionnement du bouton avec les propriétés Margin (Marge) et Padding (Remplissage) **Margin** * Vous pouvez spécifier l'espace que vous souhaitez entre les bords du bouton et l'écran en utilisant des valeurs en pixels ou en pourcentage. **Padding** * Vous pouvez spécifier l'espace que vous souhaitez entre la bordure et le contenu du bouton en utilisant des valeurs en pixels ou en pourcentage. ## Programmation du bouton ![Les blocs ci-dessus indiquent que lorsque l'on clique sur le bouton 1, un son est émis.](https://gblobscdn.gitbook.com/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6C8KjG1iolfDCYs8%2Fbutton-%E2%9C%95-fig-2.png?alt=media) Vous pouvez utiliser les propriétés suivantes pour choisir le moment où un événement se produira : * **Click:** Effectue une action lorsque l'utilisateur appuie sur le bouton * **Long Click:** Effectue une action lorsque l'utilisateur maintient le bouton enfoncé * **Touch Up:** Effectue une action après que l'utilisateur ait relâché le bouton * **Touch Down:** Effectue une action après que l'utilisateur ait touché doucement le bouton --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://bastien-dosreis.gitbook.io/thunkable/components/user-interface/button.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.