Default

Material Icon

Common use case

Start an event

Navigation or settings

Pro-tip: Buttons and Icon Fonts

One of the most common customizations of buttons is to add an image to them but this can both take time to generate and also take up valuable space in your app. One way to avoid this is to use one of the many icon fonts available to substitute a custom font for images.

For navigation menus, we highly recommend the Material Design Icon Font

For social media bars, we recommend the Mono Social Font

The sample app Thunkableagram: AI-powered Instagram uses the Material Design Icon Font for the bottom navigation bar

Click a Button to Open a Screen

Appearance

Property

Description

Height

Height in pixels, percent, 'Automatic' or 'Fill'

Width

Width in pixels, percent, 'Automatic' or 'Fill'

Shape

Default (rectangle), rounded, rectangular or oval. The shape will not be visible if an Image is being displayed

Background Color

Default (Gray). You can choose any color on the Designer palette or customize the color to any RGB value in the Blocks editor

Image

You can upload an image to your app or reference an image url. If an image is uploaded, it will negate the background color and shape properties

Text

Optional text that will display on the button

Text Color

Default (Black). You can choose any color on the Designer palette or customize the color to any RGB value in the Blocks editor

Text Alignment

Left, center (recommended) or right

Font Bold

If checked, button text is displayed in bold

Font Italic

If checked, button text is displayed in italic

Font Size

Point size for button text

Font Typeface

Default (Roboto), Roboto Regular, Roboto Thin, Sans Serif, Serif, and Monospace. You can upload your own custom font (.ttf)

Show Feedback

If checked, shows visual feedback for a button with an image displayed

Visible

If checked, the button will be visible on the screen

Functionality

Event

Description

Click

User tapped and releases the button

Long Click

User holds the button down

Touch Down

User gently presses the button

Touch Up

User releases the button

Enabled

If checked, button functionality is enabled

Got Focus

User's finger is over the button, making it possible to click

Lost Focus

User's finger is away from the button, making it no longer possible to click