Skip to main content

Text

Displays inline text with specific visual styles or tones. Use to emphasize or differentiate words or phrases within a Paragraph or other block-level components.

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
"" | "auto" | "ltr" | "rtl"
Default: ''

Indicates the directionality of the element’s text.

  • ltr: languages written from left to right (e.g. English)
  • rtl: languages written from right to left (e.g. 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 fontVariantNumeric
fontVariantNumeric
"auto" | "normal" | "tabular-nums"
Default: 'auto' - inherit from the parent element

Set the numeric properties of the font.

Anchor to interestFor
interestFor
string

ID of a component that should respond to interest (e.g. hover and focus) on this component.

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

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

Anchor to type
type
"strong" | "generic" | "address" | "redundant"
Default: 'generic'

Provide semantic meaning and default styling to the text.

Other presentation properties on Text override the default styling.

Was this section helpful?

Anchor to slotsSlots

Anchor to children
children
HTMLElement

The content of the Text.

Was this section helpful?

Code

<s-paragraph>
<s-text type="strong">Name: </s-text>
<s-text>Jane Doe</s-text>
</s-paragraph>

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.
Was this section helpful?

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 section helpful?

Anchor to examplesExamples

Component examples

Anchor to example-basic-usageBasic usage

Anchor to example-basic-usageBasic Usage

Standard text content for general interface messaging and descriptions.

Anchor to example-strong-textStrong Text

Emphasized text for important messages and call-to-actions.

Anchor to example-semantic-addressSemantic Address

Structured address text with proper semantic meaning for screen readers.

Anchor to example-tabular-numbersTabular Numbers

Monospace number formatting for consistent alignment in tables and financial data.

Anchor to example-status-tonesStatus Tones

Color-coded text indicating different status states and semantic meanings.

Anchor to example-accessibility-hidden-textAccessibility Hidden Text

Text visible only to screen readers for providing additional context.

Anchor to example-right-to-left-textRight-to-Left Text

Text direction support for RTL languages like Arabic and Hebrew.

Anchor to example-subdued-colorSubdued Color

Lower contrast text for secondary information and timestamps.

Anchor to example-interest-for-associationInterest For Association

Text element associated with tooltips using the interestFor attribute to show additional information on hover or focus.

Was this section helpful?

Basic Usage

<s-text>
Manage your products and inventory from one dashboard.
</s-text>