Skip to main content

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, alignment options, and line clamping for flexible inline typography control. For block-level text content, use paragraph.

Support
Targets (29)

Supported targets

  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

Anchor to propertiesProperties

Anchor to accessibilityVisibility
accessibilityVisibility
'visible' | 'hidden' | 'exclusive'
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 color
color
'base' | 'subdued'
Default: 'base'

Modify the color to be more or less intense.

Anchor to dir
dir
'ltr' | 'rtl' | 'auto' | ''
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 display
display
<"auto" | "none">
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 id
id
string

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 lang
lang
string
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 (Subtag label)

It is recommended to combine it with the dir attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.

Anchor to tone
tone
'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'
Default: 'auto'

Sets the tone of the component, based on the intention of the information being conveyed.

Anchor to type
type
'small' | 'address' | 'mark' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'
Default: 'generic'

Provide semantic meaning and default styling to the text.

Other presentation properties on Text override the default styling.

Examples
<s-text type="small" color="subdued">
All transactions are secure and encrypted.
</s-text>

Preview

Anchor to useful-forUseful for

  • Adding inline text elements such as labels or line errors.
  • Applying different visual tones and text styles to specific words or phrases within a s-paragraph, such as a strong type or critical tone.

Anchor to best-practicesBest Practices

  • Use plain and clear terms.
  • Don’t use jargon or technical language.
  • Don’t use different terms to describe the same thing.
  • Don’t duplicate content.
Was this page helpful?