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.

Navigate to a different screen

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.

Properties

Button

Property	Value	Description
Text	Text	Text displayed on the button.
Font	Select from font menu	Font for the button's text.
Custom Font (mobile only)*	Upload TTF or OTF file	Font for the button's text.
Text Color	Color	Color for the button's text.
Font Bold	True/False	True = button's text is bold. False = button's text is not bold.
Font Italic	True/False	True = button's text is italic. False = button's text is not italic.
Raised	True/False	True = button has a shadow. False = button does not have a shadow.
Font Size	Number	Font size of the button's text.
Disabled	True/False	True = button is disabled for the user by default. False = button is enabled for the user by default.

Uploading a custom font may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information.

Layout

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

Style

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

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
	This event fires when a user taps (or clicks) the button.
	This event fires when a user presses and holds the button for an extended period of time.
	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.
	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.
	Set the text that is displayed on the button.
	Get the text that is displayed on the button.
	Set the color of the text that is displayed on the button.
	Get the color of the text that is displayed on the button.
	Set the font size of the text that is displayed on the button.
	Get the font size of the text that is displayed on the button.
	Set the custom font of the text that is displayed on the button.
	Get the custom font of the text that is displayed on the button.
	Set the button's background color.
	Get the button's background color.
	Set the button's background picture. Click the dropdown menu to select an image from your computer.
	Get the button's background picture.
	Set the button's background picture resize mode.
	Get the button's background picture resize mode.
	Set the button's height in pixels.
	Get the button's height in pixels.
	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.
	Set the button's width in pixels.
	Get the button's width in pixels.
	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.
	When set to true, the button is visible to users. When set to false, the button is invisible to users.
	Gets the button's visibility status. Returns true (visible) or false (invisible).
	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.
	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.
	Set the position of the upper left corner of the button on the Y-axis, where the top of the screen is Y=0.
	Get the position of the upper left corner of the button on the Y-axis, where the top of the screen is Y=0.
	Set the font of the text displayed on the button to bold.
	Get the color of the text that is displayed on the button. tbd
	Set the font of the text displayed on the button to italics.
	Get whether the font of the text displayed on the button is italics.
	Set the font of the text displayed on the button to raised.
	Get whether the font of the text displayed on the button is raised.
	When set to true, the button is disabled or inactive for users. When set to false, the button is not disabled, it is active for users.
	Get the button's disabled status.

Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedback. Your valuable insights will help us improve and better serve you in the future.