# 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="/files/-MWYgxZKV1658PjyqXWP" 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                                                                                                                                                                                    |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](/files/6h3dweQBTpOkhOuSEnkg) | This event fires when a user taps (or clicks) the button.                                                                                                                                      |
| ![](/files/BmCusXZ3LhkkeFEcAbK2) | This event fires when a user presses and holds the button for an extended period of time.                                                                                                      |
| ![](/files/raKugM1NawaHn32ke7dL) | 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.                                             |
| ![](/files/VQWZBLkWBc8MJrXhe9Bu) | 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.     |
| ![](/files/8K4nZ0R2mTkDMezj8pi8) | Set the text that is displayed on the button.                                                                                                                                                  |
| ![](/files/hzQzbuOlylk4iY7ACtt8) | Get the text that is displayed on the button.                                                                                                                                                  |
| ![](/files/5LAoRjBJnqj8CVYOEdd3) | Set the color of the text that is displayed on the button.                                                                                                                                     |
| ![](/files/QYLEKJsifi60FoClksHr) | Get the color of the text that is displayed on the button.                                                                                                                                     |
| ![](/files/isC3nR10ez6xjHcwVK7M) | Set the font size of the text that is displayed on the button.                                                                                                                                 |
| ![](/files/47RNsnypAnRiHu5lITpJ) | Get the font size of the text that is displayed on the button.                                                                                                                                 |
| ![](/files/kE2uZoggdlKjPLMu0m86) | Set the custom font of the text that is displayed on the button.                                                                                                                               |
| ![](/files/vMvCH1MjGDNqLNrRVtUk) | Get the custom font of the text that is displayed on the button.                                                                                                                               |
| ![](/files/g96FjfiQbhiuEuWTT2B9) | 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".                                                            |
| ![](/files/fjJ0zI6rcOG8S2vMszvM) | 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.                                                 |
| ![](/files/OEZ4cbOLwNelDorWyebH) | Set the button's background picture. Click the dropdown menu to select an image from your computer.                                                                                            |
| ![](/files/qOq97SchGmF2wJVaAZDb) | Get the button's background picture.                                                                                                                                                           |
| ![](/files/PLz6RKATHxuW9GxI7B9u) | Set the button's background picture resize mode.                                                                                                                                               |
| ![](/files/5HV0a7ulGsm9Tcm7hc8K) | Get the button's background picture resize mode.                                                                                                                                               |
| ![](/files/vSXmTOtXQmwYxdi1HNb6) | Set the button's height in pixels.                                                                                                                                                             |
| ![](/files/5obZx7NEB0wL7ed4Xbhj) | Get the button's height in pixels.                                                                                                                                                             |
| ![](/files/13DRnvIdbTBwOAcrH632) | 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. |
| ![](/files/NZvRxn8kPjGtezVKOjg3) | Set the button's width in pixels.                                                                                                                                                              |
| ![](/files/CnRtLTdktJ1dAPIOXvDB) | Get the button's width in pixels.                                                                                                                                                              |
| ![](/files/U1npywktJU8NlQxjNpKm) | 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.   |
| ![](/files/lLFhTuF2YsKHV2iontgq) | <p>When set to true, the button is visible to users.</p><p>When set to false, the button is invisible to users.</p>                                                                            |
| ![](/files/XSYQ0OQsw1r0hBCqCyNB) | Gets the button's visibility status. Returns true (visible) or false (invisible).                                                                                                              |
| ![](/files/4T0NcdcM37SWax7mB2pG) | 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.                                                                               |
| ![](/files/Yw5R0TSXZHORcIkj8qI7) | 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.                                                                               |
| ![](/files/kN1XyjtxiPbfQqa7557x) | Set the position of the upper left corner of the button on the Y-axis, where the top of the screen is Y=0.                                                                                     |
| ![](/files/nu4OaKnogzjsOtzqIttr) | Get the position of the upper left corner of the button on the Y-axis, where the top of the screen is Y=0.                                                                                     |
| ![](/files/GCyalkbMJOcTWHoiJhmH) | Set the font of the text displayed on the button to bold.                                                                                                                                      |
| ![](/files/u2Cvcraqwyxv1hz9i5B2) | Get the color of the text that is displayed on the button. tbd                                                                                                                                 |
| ![](/files/R6bTLugrtOppp1COl4lq) | Set the font of the text displayed on the button to italics.                                                                                                                                   |
| ![](/files/h1GGtF6V5ZxdOI2nDVVY) | Get whether the font of the text displayed on the button is italics.                                                                                                                           |
| ![](/files/2oLiCziklAC8mvxW0ghP) | Set the font of the text displayed on the button to raised.                                                                                                                                    |
| ![](/files/bYkvFOxhBtfO9dVEYFX4) | Get whether the font of the text displayed on the button is raised.                                                                                                                            |
| ![](/files/QOMizqLMxuoYe8lPv472) | <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>                                            |
| ![](/files/tsb8GUD8r5chxzquYe42) | 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 %}


---

# 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://docs.thunkable.com/app-design/ui-components/basic-components/button.md?ask=<question>
```

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.