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)
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	Set the numeric properties of the font.
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"	Sets the tone of the component, based on the intention of the information being conveyed.
type	"strong" | "address" | "redundant" | "generic"	Provide semantic meaning and default styling to the text. Other presentation properties on Text override the default styling.

Slots

Slot	Description
default	The content of the Text.