# Button Component

## Overview

The button component gives your user familiar ways to start actions in your app. Examples include navigating between app screens, submitting user inputs, and triggering a device’s camera to take a photo. 

In the block combination below, when a user clicks Button1 they will be taken to, or navigate to, Screen2.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWYeR-MpHbCPfo6qGVQ%2F-MWYgxZKV1658PjyqXWP%2Fbtn_click_1.png?alt=media&#x26;token=70e26ef5-3b7c-4622-9118-3df655dc4379" alt="Navigate to a different screen" width="375"></div>

## Video Tutorial

### How to Change Thunkable Screens with a Button Click

In this tutorial, you’ll learn how to use the “navigate to” block to allow your app’s users to navigate between app screens with a simple button click.

{% embed url="<https://youtu.be/8Nl_eF56ZxY>" %}

## Properties

### Button

<table><thead><tr><th width="214.33333333333331">Property</th><th width="198">Value</th><th>Description</th></tr></thead><tbody><tr><td>Text</td><td>Text</td><td>Text displayed on the button.</td></tr><tr><td>Font</td><td>Select from font menu</td><td>Font for the button's text.</td></tr><tr><td>Custom Font (mobile only)*</td><td>Upload TTF or OTF file</td><td>Font for the button's text.</td></tr><tr><td>Text Color</td><td>Color</td><td>Color for the button's text.</td></tr><tr><td>Font Bold</td><td>True/False</td><td>True = button's text is <strong>bold</strong>.<br>False = button's text is not bold.</td></tr><tr><td>Font Italic</td><td>True/False</td><td>True = button's text is <em>italic.</em><br>False = button's text is not <em>italic.</em></td></tr><tr><td>Raised**</td><td>True/False</td><td>True = button has a shadow.<br>False = button does not have a shadow.</td></tr><tr><td>Font Size</td><td>Number</td><td>Font size of the button's text.</td></tr><tr><td>Disabled</td><td>True/False</td><td>True = button is disabled for the user by default.<br>False = button is enabled for the user by default.</td></tr></tbody></table>

{% hint style="info" %}
\* Uploading a custom font may only be available for Creators on certain Thunkable plans. Please refer to our [pricing page](https://thunkable.com/#/pricing) for more information.
{% endhint %}

{% hint style="info" %}
\*\* Raised is no longer supported. Please use Shadows under Style instead.
{% endhint %}

### Layout

<table><thead><tr><th width="158.66666666666666">Property</th><th width="186">Value</th><th>Description</th></tr></thead><tbody><tr><td>X</td><td>coordinate value</td><td>Position of the upper left corner of the button on the X-axis, where the left side of the screen is X=0.</td></tr><tr><td>Y</td><td>coordinate value</td><td>Position of the upper left corner of the button on the Y-axis, where the top of the screen is Y=0.</td></tr><tr><td>Height</td><td>number in pixels</td><td>The button's height is defined by a custom number of pixels.</td></tr><tr><td>Width</td><td>number in pixels</td><td>The button's width is defined by a custom number of pixels.</td></tr><tr><td>Resize Mode</td><td>Stretch</td><td>Stretches the button to fit the dimensions of the device's screen.</td></tr><tr><td>Resize Mode</td><td>Float in Place</td><td>Renders the button in the same aspect ratio as the design, regardless of the device size.</td></tr></tbody></table>

### Style

<table><thead><tr><th width="196">Property</th><th width="183.66666666666666">Value</th><th>Description</th></tr></thead><tbody><tr><td>Visible</td><td>visible</td><td>Users can see the button.</td></tr><tr><td>Visible</td><td>invisible</td><td>Users cannot see the button.</td></tr><tr><td>Background Color</td><td>color</td><td>The background color of the button.</td></tr><tr><td>Border: Style</td><td>solid</td><td>The button's border is a solid line.</td></tr><tr><td>Border: Style</td><td>dotted</td><td>The button's border is a dotted line.</td></tr><tr><td>Border: Style</td><td>dashed</td><td>The button's border is a dashed line.</td></tr><tr><td>Border: Color</td><td>color</td><td>The button's border is the color selected. </td></tr><tr><td>Border: Width</td><td>number in pixels</td><td>The width of the button's border is defined by a custom number of pixels.</td></tr><tr><td>Border: Radius</td><td>number in pixels</td><td>The radius of the button border’s corners is defined by a custom number of pixels.</td></tr><tr><td>Shadow: Color</td><td>color</td><td>The button's shadow is the color selected. </td></tr><tr><td>Shadow: Opacity</td><td>number between 0 and 100</td><td>The opacity of the button's shadow. </td></tr><tr><td>Shadow: Radius</td><td>number in pixels</td><td>The radius of the button shadow’s corners is defined by a custom number of pixels.</td></tr><tr><td>Shadow: Offset</td><td>number in pixels</td><td>How far the button's shadow should be offset, in height and width, is defined by a custom number of pixels.</td></tr></tbody></table>

### Navigation

<table><thead><tr><th width="196">Property</th><th width="183.66666666666666">Value</th><th>Description</th></tr></thead><tbody><tr><td>Navigate to screen</td><td>none</td><td>When users click on the button there is no navigation to another screen.</td></tr><tr><td>Navigate to screen</td><td>screen name</td><td>When users click on the button they navigate to the selected screen.</td></tr></tbody></table>

## Button Blocks

To access the blocks specific to the button component:

1. On the Design tab, add a **Button** component to a screen.
2. Navigate to the **Blocks** tab.
3. In the component tree on the left, click the name of the button component.
4. A drawer of button-specific blocks opens.

| Block Image                                                                                                                                                                                                                                                                    | Description                                                                                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FVoTrsi974FaETiWossVw%2Fbutton%20-%20click.png?alt=media\&token=8ecf88a3-15d6-4e78-84fd-30fcf5cd16a4)                                      | This event fires when a user taps (or clicks) the button.                                                                                                                                      |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FWfaZC8cJWONm02lsQc1V%2Fbutton%20-%20long%20click.png?alt=media\&token=9c59020e-d0a3-493b-8b14-1d819c9b83d6)                               | This event fires when a user presses and holds the button for an extended period of time.                                                                                                      |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FCfSgJLMYKGc01FZvfmoN%2Fbutton%20-%20touch%20down.png?alt=media\&token=bf1aba2a-a761-41db-8d4a-69ad1088e4fd)                               | This event fires when a user initially touches the button. It is the moment when the user's finger (or stylus) makes contact with the touchscreen.                                             |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FKScsmmtGcWSd2UxlNRaf%2Fbutton%20-%20touch%20up.png?alt=media\&token=18eb2b96-dcf7-4afb-b498-1adc73f6ff87)                                 | This event fires when a user lifts their finger (or stylus) off the screen or releases the press on the button. It represents the moment when the user's interaction with the button ends.     |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FHXF6DehEVFsLS0yjM2Hg%2Fbutton%20-%20set%20text.png?alt=media\&token=4139a1f3-4d61-49a3-843f-72d5b67ef2de)                                 | Set the text that is displayed on the button.                                                                                                                                                  |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FveVLcKZpYNuJhVYPCVnS%2Fbutton%20-%20text.png?alt=media\&token=84dd4083-7f91-4da6-831a-5cf042e69cd2)                                       | Get the text that is displayed on the button.                                                                                                                                                  |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FJ1EjwtvNdSESPNKJO2vl%2Fbutton%20-%20set%20text%20color.png?alt=media\&token=96352ae8-190e-49f3-aa09-e38df5f42db2)                         | Set the color of the text that is displayed on the button.                                                                                                                                     |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FIVAPXLuE9icNBvHmM8i0%2Fbutton%20-%20text%20color.png?alt=media\&token=98163767-70d9-44c6-80b1-c6ac4b10b7f6)                               | Get the color of the text that is displayed on the button.                                                                                                                                     |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fapu2zK4UAUuHOACoQBwR%2Fbutton%20-%20set%20font%20size.png?alt=media\&token=245966b4-faa1-45f7-843b-3c64ec733c93)                          | Set the font size of the text that is displayed on the button.                                                                                                                                 |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FfGv4DtfGu3Fdyx5Ylrm6%2Fbutton%20-%20font%20size.png?alt=media\&token=e4ab6f55-28be-4d44-a9ec-03a610575b55)                                | Get the font size of the text that is displayed on the button.                                                                                                                                 |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FkYFYOUpZg8Q845QRPKkt%2Fbutton%20-%20set%20custom%20font.png?alt=media\&token=b925e61c-b6e6-4e11-be71-2eff721d7900)                        | Set the custom font of the text that is displayed on the button.                                                                                                                               |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FjxDOGxxgCZNvPw6MGwI0%2Fbutton%20-%20custom%20font.png?alt=media\&token=cfca1ce4-aaf5-4f4c-8760-b73b901a0eb8)                              | Get the custom font of the text that is displayed on the button.                                                                                                                               |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FtDhj31KBmBOnt5rZU591%2Fbutton%20-%20set%20background%20color.png?alt=media\&token=03674ff0-c0d9-4f65-bd75-41e672482744)                   | Set the button's background color by connecting a color, or a text with a color in RGBA "rgba(93, 122, 252, 100)" or Hex "#5D7AFC".                                                            |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FuVEgqrFpt0R7XbFxK14K%2Fbutton%20-%20background%20color.png?alt=media\&token=ddb41878-3b8f-4f0d-b26d-462bd18eefbb)                         | Get the button's background color. By default, it returns the color in RGBA. If you set it using the set color block with Hex, it returns Hex.                                                 |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F3ElrcMf4Gl7WucGesEcf%2Fbutton%20-%20set%20background%20picture.png?alt=media\&token=1ffce1f3-dd7f-4824-9af6-df5e0357947d)                 | Set the button's background picture. Click the dropdown menu to select an image from your computer.                                                                                            |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FniV8XMyv3C3vJeEqKnex%2Fbutton%20-%20background%20picture.png?alt=media\&token=f5324ba1-64b5-4320-a9af-8ffae7d88f0a)                       | Get the button's background picture.                                                                                                                                                           |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FQiqcFbFzKfZDvciYEAZM%2Fbutton.background.picture.resize.png?alt=media\&token=4a58e839-7aad-4aee-8394-30de7b4c605a)                        | Set the button's background picture resize mode.                                                                                                                                               |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fkfrc3CefBCUfVWCWYtAb%2Fbutton%20-%20get%20background%20picture%20resize%20mode.png?alt=media\&token=11b4b28d-0327-4723-888a-367815a17648) | Get the button's background picture resize mode.                                                                                                                                               |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FUvc5o2IFzJBBIYMXDPPT%2Fbutton%20-%20set%20height.png?alt=media\&token=a81dfabd-20e9-4cb6-b7dd-86e000b16355)                               | Set the button's height in pixels.                                                                                                                                                             |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FTujUajJtz3RUoRLKSMim%2Fbutton%20-%20height.png?alt=media\&token=5ae6fccc-89ac-4877-bf8c-1483bfa8dd68)                                     | Get the button's height in pixels.                                                                                                                                                             |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FfuL3lFlW4QDLj9v3wDqO%2Fbutton%20-%20computed%20height.png?alt=media\&token=657d9583-8880-443c-b028-70e44b133233)                          | Gets the button's computed height, the on-screen dimensions of the button, after it has been rendered on-screen. The value returned is an integer, representing the button's height in pixels. |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F80Q1FXLAlbIjO0WQKf8A%2Fbutton%20-%20set%20width.png?alt=media\&token=5018f4e4-88ae-453b-9a00-9bbdcfc53427)                                | Set the button's width in pixels.                                                                                                                                                              |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FGnXuHbdAhUnyzOPNTn2R%2Fbutton%20-%20width.png?alt=media\&token=b682ca13-9dca-4090-8522-8799d56ef8e7)                                      | Get the button's width in pixels.                                                                                                                                                              |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FUHtDOgRWqIZ8A6qPSBPU%2Fbutton%20-%20computed%20width.png?alt=media\&token=69738420-1896-4756-af03-3311ddb88849)                           | Gets the button's computed width, the on-screen dimensions of the button, after it has been rendered on-screen. The value returned is an integer, representing the button's width in pixels.   |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FmPK7K3J8LYkeXTBTqt6u%2Fbutton%20-%20set%20visible.png?alt=media\&token=f9f65e95-4ed9-4673-9bba-8a115a014fe1)                              | <p>When set to true, the button is visible to users.</p><p>When set to false, the button is invisible to users.</p>                                                                            |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FjL0e9zIOBG1QjLE3fp2u%2Fbutton%20-%20visible.png?alt=media\&token=144c96fb-bd08-4bdd-bc77-0de798dffc49)                                    | Gets the button's visibility status. Returns true (visible) or false (invisible).                                                                                                              |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FN8OVT9E5ef2qyQeOdK1s%2Fbutton%20-%20set%20X.png?alt=media\&token=b5fbd950-ae27-4db9-a0e8-7bbce35b81aa)                                    | Set the position of the upper left corner of the button on the X-axis, where the left side of the screen is X=0.                                                                               |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FDIGhEDVsi2ouaEilTxtf%2Fbutton%20-%20x.png?alt=media\&token=1d33396f-46c9-419a-9514-da5dfd83d426)                                          | Get the position of the upper left corner of the button on the X-axis, where the left side of the screen is X=0.                                                                               |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FtTGwwCmR0tKVUeZoBvge%2Fbutton%20-%20set%20Y.png?alt=media\&token=3f8a6a66-aeae-4980-a05f-e8c6bc54a99c)                                    | Set the position of the upper left corner of the button on the Y-axis, where the top of the screen is Y=0.                                                                                     |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FI8iYW5yF8ISkOTgNKzRl%2Fbutton%20-%20y.png?alt=media\&token=8f92c1dd-dde0-4466-b0a0-7c244e440cee)                                          | Get the position of the upper left corner of the button on the Y-axis, where the top of the screen is Y=0.                                                                                     |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F1xlCquQuzyZC4O3vsBQJ%2Fbutton%20-%20set%20font%20bold.png?alt=media\&token=75eebcc8-ebf7-483f-a31f-1c92cf4d5a71)                          | Set the font of the text displayed on the button to bold.                                                                                                                                      |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fo3dzAr7gngS1nQS7iXK6%2Fbutton%20-%20font%20bold.png?alt=media\&token=0fe9ba97-f0a0-44ce-9216-7edc5f91d11b)                                | Get the color of the text that is displayed on the button. tbd                                                                                                                                 |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FNHb7rUlQadYjPYQeND3A%2Fbutton%20-%20set%20italic.png?alt=media\&token=be3b0d73-9676-4a4d-beae-6e842bb25795)                               | Set the font of the text displayed on the button to italics.                                                                                                                                   |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FCJv1UFUaURkXky9CBCwg%2Fbutton%20-%20italic.png?alt=media\&token=b4be0f4c-8240-43fb-a8d9-1ed68483fa67)                                     | Get whether the font of the text displayed on the button is italics.                                                                                                                           |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FMnOlBybWXix3Yp7mbHju%2Fbutton%20-%20set%20raised.png?alt=media\&token=6a99655f-ef9e-405d-84c4-472ecfc91c65)                               | Set the font of the text displayed on the button to raised.                                                                                                                                    |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FtbK6LEogpdQaz8tKW6Zi%2Fbutton%20-%20raised.png?alt=media\&token=d14cba1d-2b46-471a-a99b-658fc658e18f)                                     | Get whether the font of the text displayed on the button is raised.                                                                                                                            |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F0HvGO6ROWsVIPVMrHxnK%2Fbutton%20-%20set%20disabled.png?alt=media\&token=d04c0e2d-410f-48be-b361-eba99155f60b)                             | <p>When set to true, the button is disabled or inactive for users.</p><p>When set to false, the button is not disabled, it is active for users.</p>                                            |
| ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FolrbjOMJTQHjykIIfdks%2Fbutton%20-%20disabled.png?alt=media\&token=eadd0c62-45a9-4940-b65d-4b38fa937d05)                                   | Get the button's disabled status.                                                                                                                                                              |

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}