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": 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": Modify the color to be more or less intense.
Anchor to dir 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)
Anchor to fontVariantNumeric fontVariantNumeric "auto" | "normal" | "tabular-nums": 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": Sets the tone of the component, based on the intention of the information being conveyed.
Anchor to type type "strong" | "generic" | "address" | "redundant": Provide semantic meaning and default styling to the text.

Other presentation properties on <s-text> override the default styling.

Text

accessibilityVisibility
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.
```
"visible" | "hidden" | "exclusive"
```
adoptedCallback
```
() => void
```
attributeChangedCallback
```
(name: string) => void
```
click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
```
({ sourceEvent }?: ClickOptions) => void
```
color
Modify the color to be more or less intense.
```
"base" | "subdued"
```
connectedCallback
```
() => void
```
dir
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)
```
"" | "auto" | "ltr" | "rtl"
```
disconnectedCallback
```
() => void
```
fontVariantNumeric
Set the numeric properties of the font.
```
"auto" | "normal" | "tabular-nums"
```
interestFor
ID of a component that should respond to interest (e.g. hover and focus) on this component.
```
string
```
queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
```
() => void
```
setAttribute
```
(name: string, value: string) => void
```
tone
Sets the tone of the component, based on the intention of the information being conveyed.
```
"info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"
```
type
Provide semantic meaning and default styling to the text. Other presentation properties on `<s-text>` override the default styling.
```
"strong" | "generic" | "address" | "redundant"
```

declare class Text extends PreactCustomElement implements TextProps {
  accessor fontVariantNumeric: TextProps['fontVariantNumeric'];
  accessor color: TextProps['color'];
  accessor tone: TextProps['tone'];
  accessor type: TextProps['type'];
  accessor dir: TextProps['dir'];
  accessor accessibilityVisibility: TextProps['accessibilityVisibility'];
  accessor interestFor: string;
  constructor();
}

ClickOptions

sourceEvent
The event you want to influence the synthetic click.
```
ActivationEventEsque
```

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

button
```
number
```
ctrlKey
```
boolean
```
metaKey
```
boolean
```
shiftKey
```
boolean
```

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

Was this section helpful?

Code

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

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

examples

Code

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

<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: grid; place-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><div><s-text type="strong">Name:</s-text>
<s-text>Jane Doe</s-text>
</div></body></html>

Preview

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?