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, tone, and color options for flexible inline typography control. Text is commonly used inside paragraph to style specific words or phrases within block-level content.

Text is inline by default — wrapping it around block-level content might cause unexpected layout behavior.

Support
Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the text component.

Anchor to accessibilityVisibility
accessibilityVisibility
'visible' | 'hidden' | 'exclusive'
Default: 'visible'

Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.

  • visible: The element is visible to all users (both sighted users and screen readers).
  • hidden: The element is visually visible but hidden from screen readers. Use this for decorative elements that don’t provide meaningful information.
  • exclusive: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.
Anchor to color
color
'base' | 'subdued'
Default: 'base'

The color emphasis level that controls visual intensity.

  • subdued: Deemphasized color for secondary text, supporting labels, and less critical interface elements.
  • base: Primary color for body text, standard UI elements, and general content with good readability.
  • strong: Emphasized color for headings, key labels, and interactive elements that need prominence.
Anchor to dir
dir
'ltr' | 'rtl' | 'auto' | ''
Default: ''

Indicates the directionality of the element’s text.

  • ltr: The languages written from left to right (such as English).
  • rtl: The languages written from right to left (such as Arabic).
  • auto: The user agent determines the direction based on the content.
  • "": The direction is inherited from parent elements (equivalent to not setting the attribute).

Learn more about the dir 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.

Learn more about the display property.

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: ''

The language of the button's text content. Use this when the button text is in a different language than the rest of the page, so assistive technologies can 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'

The semantic type and styling treatment for the text content.

Other presentation properties on s-text override the default styling.

  • address: A semantic type that indicates the text is contact information. Typically used for addresses.
  • redundant: A semantic type that indicates the text is no longer accurate or no longer relevant.
  • mark: A semantic type that indicates the text is marked or highlighted.
  • emphasis: A semantic type that indicates emphatic stress.
  • offset: A semantic type that indicates an offset from the normal prose.
  • strong: A semantic type that indicates strong importance, seriousness, or urgency.
  • small: A semantic type that indicates less important text.
  • generic: No additional semantics or styling is applied.

Anchor to ExamplesExamples

Anchor to Display subdued textDisplay subdued text

Display subdued security text near payment fields. This example renders an s-text with type="small" and color="subdued" for a security reassurance message.

Display subdued text

A rendered example of the text component

html

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

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

<s-text type="strong" tone="neutral">
By placing this order, you agree to our terms of sale.
</s-text>

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

<s-text>Total: </s-text><s-text type="strong">$49.99</s-text>

Anchor to Use text within a paragraphUse text within a paragraph

Nest s-text inside s-paragraph to highlight specific values within body text. This example emphasizes the total price with type="strong" while the rest of the sentence remains at default weight.

html

<s-paragraph>Estimated total: <s-text type="strong">$42.99</s-text> including tax and shipping.</s-paragraph>

Anchor to Best practicesBest practices

  • Apply tone intentionally: Set tone to convey semantic meaning like success or warning rather than using color alone.
  • Keep inline text short: Use s-text for words or phrases, not full paragraphs. For block-level content, use s-paragraph.
Was this page helpful?