Button Component
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
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.
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 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.
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. |
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. |
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.
Last modified 7d ago