Interlock
PrimitivesTextBoxButtonFlexLinkModalData inputInputData vizList
Text Interlock text component 🔗 text ▪️ variant ▪️ align Props 
interface TextProps {
  /**
   * @param  text display text (Required)
   */
  text: string;
  /**
   * @param CSS overrides provided in-line. (Optional)
   */
  css?: React.CSSProperties;
  /**
   * @param Variant specifies text variant.
   * Options are header, subheader, body or caption
   */
  variant?: "header" | "subheader" | "body" | "caption";
  /**
   * @param align specifies how the text should be aligned
   */
  align?: "left" | "center" | "right";
}
text
<>
  <Text text="This is a test" />
</>
Rendered output
This is a test
variantDescription: Specifies the design variant used when rendering text. There are four options: header, subheader, body and caption
<>
  <Text text="Header text" variant="header" />
  <Text text="Subheader text" variant="subheader" />
  <Text text="Body text" variant="body" />
  <Text text="Caption text" variant="caption" />
</>
Rendered output
Header textSubheader textBody textCaption text
alignDescription: Sets underlying text-align property in css.
<>
  <Text text="Left aligned" align="left" />
  <Text text="Center aligned" align="center" />
  <Text text="Right aligned" align="right" />
</>
Rendered output
Left alignedCenter alignedRight aligned
Github