Text
The text component displays inline text with specific visual styles or tones. Use text to emphasize or differentiate words or phrases within paragraphs or other block-level components, applying weight, color, or semantic styling.
Text supports multiple visual variants, tone, and color options for flexible inline typography control. For block-level text content, use paragraph.
Text is inline by default — wrapping it around block-level content might cause unexpected layout behavior.
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to PropertiesProperties
Configure the following properties on the text component.
- Anchor to accessibilityVisibilityaccessibilityVisibilityaccessibilityVisibility'visible' | 'hidden' | 'exclusive''visible' | 'hidden' | 'exclusive'Default: 'visible'Default: 'visible'
Changes the visibility of the element.
visible: the element is visible to all users.hidden: the element is removed from the accessibility tree but remains visible.exclusive: the element is visually hidden but remains in the accessibility tree.
- Anchor to colorcolorcolor'base' | 'subdued''base' | 'subdued'Default: 'base'Default: 'base'
Modify the color to be more or less intense.
- Anchor to dirdirdir'ltr' | 'rtl' | 'auto' | '''ltr' | 'rtl' | 'auto' | ''Default: ''Default: ''
Indicates the directionality of the element’s text.
ltr: languages written from left to right (such as English)rtl: languages written from right to left (such as Arabic)auto: the user agent determines the direction based on the content'': direction is inherited from parent elements (equivalent to not setting the attribute)
- Anchor to displaydisplaydisplayMaybeResponsive<"auto" | "none">MaybeResponsive<"auto" | "none">Default: 'auto'Default: 'auto'
Sets the outer display type of the component. The outer type sets a component’s participation in flow layout.
auto: the component’s initial value. The actual value depends on the component and context.none: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.
- Anchor to idididstringstring
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
- Anchor to langlanglangstringstringDefault: ''Default: ''
Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. Reference of values (
Subtaglabel)It is recommended to combine it with the
dirattribute to ensure the text is rendered correctly if the surrounding content’s direction is different.- Anchor to tonetonetone'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom''info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'Default: 'auto'Default: 'auto'
Sets the tone of the component, based on the intention of the information being conveyed.
- Anchor to typetypetype'address' | 'mark' | 'small' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset''address' | 'mark' | 'small' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'Default: 'generic'Default: 'generic'
Provide semantic meaning and default styling to the text.
Other presentation properties on Text override the default styling.
MaybeResponsive
Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string. - `T`: Base value that applies in all conditions. - `@container${string}`: Container query string for conditional responsive styling based on container size.
T | `@container${string}`Anchor to ExamplesExamples
Anchor to Display subdued textDisplay subdued text
Display subdued security text near account pages. This example renders an s-text with type="small" and color="subdued" for a security reassurance message.
Display subdued text
html
Anchor to Emphasize important informationEmphasize important information
Apply strong emphasis and neutral tone to informational text. This example sets type="strong" with tone="neutral" for policy copy that shouldn't read as success or warning.
html
Anchor to Mix regular and strong text in one lineMix regular and strong text in one line
Pair a label with emphasized values inside the same sentence. This example places two s-text elements inline, one default and one with type="strong".
html
Anchor to Best practicesBest practices
- Apply tone intentionally: Set
toneto convey semantic meaning like success or warning rather than using color alone. - Keep inline text short: Use
s-textfor words or phrases, not full paragraphs. For block-level content, uses-paragraph.