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.
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:
On the Design tab, add a Button component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the button component.
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.
Last updated