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.

Anchor to slotsSlots

Anchor to children children HTMLElement: The content of the Text.

Examples

<s-paragraph>

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

<s-text>Jane Doe</s-text>

</s-paragraph>

Preview

Examples

Code

jsx

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

html

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

Basic Usage

Description

Standard text content for general interface messaging and descriptions.

jsx

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

html

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

Strong Text

Description

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

jsx

<s-text type="strong">
  Free shipping on orders over $50
</s-text>

html

<s-text type="strong">
  Free shipping on orders over $50
</s-text>

Semantic Address

Description

Structured address text with proper semantic meaning for screen readers.

jsx

<s-text type="address">
  123 Commerce Street, Toronto, ON M5V 2H1
</s-text>

html

<s-text type="address">
  123 Commerce Street, Toronto, ON M5V 2H1
</s-text>

Tabular Numbers

Description

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

jsx

<s-text fontVariantNumeric="tabular-nums">
  $1,234.56
</s-text>

html

<s-text fontVariantNumeric="tabular-nums">
  $1,234.56
</s-text>

Status Tones

Description

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

jsx

<s-stack gap="small">
  <s-text tone="success">Order fulfilled</s-text>
  <s-text tone="critical">Payment failed</s-text>
  <s-text tone="warning">Low inventory</s-text>
</s-stack>

html

<s-stack gap="small">
  <s-text tone="success">Order fulfilled</s-text>
  <s-text tone="critical">Payment failed</s-text>
  <s-text tone="warning">Low inventory</s-text>
</s-stack>

Accessibility Hidden Text

Description

Text visible only to screen readers for providing additional context.

jsx

<s-text accessibilityVisibility="exclusive">
  Product prices include tax
</s-text>

html

<s-text accessibilityVisibility="exclusive">
  Product prices include tax
</s-text>

Right-to-Left Text

Description

Text direction support for RTL languages like Arabic and Hebrew.

jsx

<s-text dir="rtl">
  محتوى النص باللغة العربية
</s-text>

html

<s-text dir="rtl">
  محتوى النص باللغة العربية
</s-text>

Subdued Color

Description

Lower contrast text for secondary information and timestamps.

jsx

<s-text color="subdued">
  Last updated 2 hours ago
</s-text>

html

<s-text color="subdued">
  Last updated 2 hours ago
</s-text>

Interest For Association

Description

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

jsx

<>
  <s-tooltip id="sku-tooltip">
    SKU must be unique across all products and cannot be changed after creation
  </s-tooltip>
  <s-text color="subdued" interestFor="sku-tooltip">
    What is a product SKU?
  </s-text>
</>

html

<s-tooltip id="sku-tooltip">
  SKU must be unique across all products and cannot be changed after creation
</s-tooltip>
<s-text color="subdued" interestFor="sku-tooltip">
  What is a product SKU?
</s-text>

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

Text elements display inline and will flow on the same line when placed next to each other. To stack multiple text elements vertically, wrap them in a Stack container or use multiple s-paragraph components.
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?