TextBlock​

The TextBlock UI component is a container designed to fill the entire available width of its parent, used to display full paragraphs or blocks of text.

Preview​

Code example​

render('Checkout::Dynamic::Render', (root) => {
  return       
    <TextBlock>
Cozy up in style!
Snuggle-ready knit, 6 colors, 50 % OFF today—grab your new favorite sweater before stock melts away!
    </TextBlock>;
});

TextBlockProps​

size?​

• extraSmall: 10px/15px
• small: 12px/18px
• base: 14px/21px
• medium: 16px/24px
• large: 18px/27px
• extraLarge: 24px/36px
• extraExtraLarge: 28px/42px

Supports custom font sizes, such as 20. The maximum value is 48. Values exceeding this limit will default to base. For example:

render('Checkout::Dynamic::Render', (root) => { return <Text size={48}>Total</Text>; }); 

emphasis?​

Used to emphasize the text in the italic or bold formats.

id?​

A unique identifier for the UI component. If this property is not set, the system will automatically generate a globally unique ID for this component.

appearance?​

Modify the color of the element. Supports custom colors, such as red or #ccc.

decoration​

Text decoration.

Type descriptions​

TextDecoration​

• lineThrough: Text strikethrough.