SText <s-text>

Inline text with tone, weight and emphasis styling. SText is the typed Vue 3 wrapper for Shopify's Polaris <s-text> web component.

import { SText } from 'polaris-vue-elements'

Best practices

• Pick a semantic type. Choose "strong" to mark key words or phrases, "address" for a postal or email address, and "redundant" for text that gives screen reader users context when the same content already appears on screen. Picking the right type lets assistive technology express what the text means.
• Emphasize sparingly. Apply type="strong" to key words or numbers within a sentence, not to whole sentences; too much emphasis loses its effect and makes text harder to scan.
• Use tone for inline status. Tones like "critical", "success" or "caution" draw attention to a status, but pair them with clear wording rather than letting color carry the message.
• Don't subdue what matters. color="subdued" suits timestamps and metadata, but avoid it for critical information merchants must read.

<SParagraph>
  Order shipped to <SText type="address">150 Elgin St, Ottawa</SText>.
  <SText type="strong">Payment pending.</SText>
</SParagraph>

See Shopify's best practices for <s-text> for the full guidance.

Example

Default textStrong textSubdued textSuccess toneCritical toneTabular numbers: 10 200 3000

<script setup>
import { SText } from 'polaris-vue-elements'
</script>

<template>
  <SText>Default text</SText>
  <SText type="strong">Strong text</SText>
  <SText color="subdued">Subdued text</SText>
  <SText tone="success">Success tone</SText>
  <SText tone="critical">Critical tone</SText>
  <SText fontVariantNumeric="tabular-nums">Tabular numbers: 10 200 3000</SText>
</template>

Props

Prop	Type	Description
accessibilityVisibility	"visible" | "hidden" | "exclusive"	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.
color	"subdued" | "base"	Modify the color to be more or less intense.
dir	"auto" | "ltr" | "rtl"	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)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Font size of the text. The named values also apply their matching line-height and letter-spacing.
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	Set the numeric properties of the font.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Font weight of the text.
interestFor	string	ID of a component that should respond to interest (e.g. hover and focus) on this component.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	The semantic tone that's applied to the text, which changes its color to convey meaning. - info: Informational content or helpful tips (blue). - success: Positive outcomes or successful states (green). - warning: Important warnings about potential issues (orange). - critical: Urgent problems or destructive actions (red). - auto: Automatically determined based on context. - neutral: General information without specific intent (gray). - caution: Advisory notices that need attention (yellow).
type	"strong" | "address" | "redundant" | "generic"	The semantic type and styling treatment for the text content. Other presentation properties on text override the default styling. - strong: Emphasizes the text with strong importance, typically displayed in bold. - generic: Standard text with no special semantic meaning or styling. - address: Marks the text as contact information, such as a physical or email address. - redundant: Indicates the text is redundant or duplicated information for screen reader context.

Slots

Slot	Description
default	The text content displayed within the text component, which applies semantic meaning and styling appropriate to the specified text type.