Text
The Text component displays text with specific visual styles or tones. Use it to present content with appropriate emphasis, hierarchy, or tone while maintaining semantic meaning.
Text on mobile surfaces is blockish, rather than inline.
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
receipt-footer. block. render - pos.
receipt-header. block. render - pos.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
customer-details. block. render - pos.
draft-order-details. action. render - pos.
draft-order-details. block. render - pos.
exchange. post. action. render - pos.
exchange. post. block. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
order-details. block. render - pos.
product-details. action. render - pos.
product-details. block. render - pos.
purchase. post. action. render - pos.
purchase. post. block. render - pos.
receipt-footer. block. render - pos.
receipt-header. block. render - pos.
register-details. action. render - pos.
register-details. block. render - pos.
return. post. action. render - pos.
return. post. block. render
Use cases
- Body content: Display text, labels, and descriptions with appropriate visual hierarchy.
- Status information: Present alerts or notifications using tone to convey urgency or importance.
- Emphasis: Create emphasized text elements using type variations like strong or small.
- Nested content: Support nested text elements for complex formatting within a single block.
Anchor to examplesExamples
Anchor to example-display-text-with-visual-stylesDisplay text with visual styles
Display text content using a Text component with customizable visual styles and tones. This example shows basic text with appropriate emphasis and hierarchy.
Display text with visual styles
Display text with visual styles
Examples
Display text with visual styles
Description
Display text content using a `Text` component with customizable visual styles and tones. This example shows basic text with appropriate emphasis and hierarchy.
Default
<s-text> <s-text type="strong">Name:</s-text> Jane Doe </s-text>
Anchor to propertiesProperties
Configure the following properties on the Text component.
- Anchor to colorcolorcolorColorKeywordColorKeywordDefault: 'base'Default: 'base'
Modify the color to be more or less intense.
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to tonetonetone"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical""auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"Default: 'auto'Default: 'auto'
Sets the tone of the component, based on the intention of the information being conveyed.
- Anchor to typetypetype"strong" | "small" | "generic""strong" | "small" | "generic"Default: 'generic'Default: 'generic'
Provide semantic meaning and default styling to the text.
Other presentation properties on Text override the default styling.
ColorKeyword
"subdued" | "base" | "strong"Anchor to best-practicesBest practices
- Choose semantic types: Use
strongfor emphasis,smallfor secondary info,genericfor standard text. - Apply appropriate tones: Use
successfor positive outcomes,warningorcriticalfor alerts,infofor helpful context,autofor neutral content. - Balance color intensity: Use
strongfor emphasis,basefor readability,subduedfor secondary info. - Nest for mixed formatting: Nest
Textcomponents when you need multiple styles within one text block. - Use Stack for icons and badges: When combining text with icons or badges, use Stack with direction="inline" instead of nesting components inside Text.
Anchor to limitationsLimitations
Complex rich text formatting isn't supported—use multiple Text components or nested text elements for varied formatting needs.
Nesting Icon or Badge components inside Text isn't supported due to React Native alignment limitations—use Stack with direction="inline" and alignItems="center" instead to properly align icons and badges with text.