Button Component
Last updated
Last updated
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.
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.
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.
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.
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:
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.
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 by connecting a color, or a text with a color in RGBA "rgba(93, 122, 252, 100)" or Hex "#5D7AFC".
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.
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.
