Text

This component allows you to specify the type of text you want to render, using the available styles Square provides for Add-ons. These styles vary from larger Display and Heading types, to Paragraph types who’s font-weight can be adjusted.

If you ever need to represent text in your Add-on, use the Text component.

Component render

Screenshot of the text Dashboard Add-Ons UI component 

<Text
  type="display-20"
  weight="semibold"
>
  Text / Display 20
</Text>

Properties

Property Type Description
children string The text to display in the text component.
type "display-20"
"display-10"
"heading-30"
"heading-20"
"heading-10"
"heading-5"
"paragraph-30"
"paragraph-20"
"paragraph-10"		 The type of text to display. These range from larger headings in the heading and display categories, to the smaller styles in the paragraph category.
weight "regular" "medium" "semibold" The weight of paragraph text can be modified to be medium or semibold. Defaults to "regular"