Skip to main content

Text

Display paragraphs and headings and style them with size, colors and more

Text components are used for:

  • Adding a header to an Application
  • Adding a subheader for other components like Tables, Forms, Charts or sections
  • Writing full paragraph descriptions and instructions

Use text components to render data for end users

Using HTML within a Text component​

Use HTML for formatting the Text component.

<h1 style="font-size:60px;color:green">{{SalesData.response.customers}}<em style="font-size:25px">(+{{SalesData.response.new_customers}})</em></h1>
Use HTML to pull in data from the response of an API and format the text component more granularly

Text Properties​

Component Properties​

PropertyDescription
TextSet the text to be displayed
Text TypeChange to Plain Text, Number, Currency, or Date
Text StyleChanges the style (font, size, etc.) of the text. Configure styles in the Typography settings
Text ColorChanges the color of the text
IconSelect an icon
Icon PositionSets the alignment of the icon
Text ColorSet the color using the color picker or hex value
Text AlignLeft, center or right alignment
Vertical AlignTop, Middle or Bottom alignment
VisibleSet true to show and false to hide. Set dynamically using JavaScript with {{}}
Scroll ContentsEnable scrollability within the text component for long strings

Reference Properties​

Properties can be accessed from other frontend components and backend APIs by adding the name of the Text component, and dot referencing the property. For a Text component named Text1:

PropertyDescription
Text1.textThe string of the text component
Text1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)