SText <s-text>

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

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.