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 SizeChange to Heading 1, Heading 2, Label, or Normal Text
Text TypeChange to Plain Text, Number, Currency, or Date
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)