Home

Guides

Editor

Components

Actions

Conditions

Components

Basic

Container

Text

Image

Icon

Button

Forms

Local State

Text Input

Date Picker

Logic

Conditional Logic

Conditional Switch Logic

Modal

Sheet

Pager

Tabbed Pager

Data

Data Loader

Repeating Item

Countdown Timer

Data Transformer

Date Elements

Paging Data Loader

Contentful

Rich Text

Text Component Documentation

Overview

The Text Component allows you to add and display text in your app. Whether it's a heading, subtitle or body text, the Text component is flexible, providing tools to style and format your text to suit your app's needs.


Key Features

  • Add and Edit Text Content

  • Style Options

  • Custom Styling with Markdown


Component Fields

1. Value

Enter text in this field to add or edit your content.

2. Markdown

Your App Creator supports Markdown for enhanced formatting and styling. Click the Markdown box to enable it, then use the Value field to apply your Markdown syntax. Click here to learn more about Markdown.

Configuration

3. Font

Click the field to select from the available font size options. These are pre-set in Typographyand can be edited in this section to match your app's theme. For example, H1 has a font size of 96px and a weight of 600, while Body 1 has a font size of 16px and a weight of 400.

4. Text Color

Click the field to select from the available text color options. These are pre-set in Colorsand can be edited in this section to match your app's theme.

5. Alignment

Click the field to choose the text alignment within its container. Options include:

  • Start: Aligns the text to the left (or right for right-to-left languages).

  • Center: Centers the text horizontally within the container.

  • End: Aligns the text to the right (or left for right-to-left languages).

6. Redacted

Tick this checkbox to hide sensitive information from view, ensuring that only authorised users can access it.


Best Practices for Using the Text Component

  • Readable Fonts: Ensure your text uses a font and size that is easy to read across all devices.

  • Contrast: Make sure the text color contrasts well with the background to improve visibility.

  • Consistency: Use consistent font sizes and styles across your app to create a cohesive design.