> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/app-design/ui-components/basic-components/button.md).

# 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 %}