---
title: Text
description: 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.
api_name: app-home
source_url:
  html: https://shopify.dev/docs/api/app-home/polaris-web-components/typography/text
  md: https://shopify.dev/docs/api/app-home/polaris-web-components/typography/text.md
---

# 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.

## Properties

* 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

  "base" | "subdued"

  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

  "info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"

  Sets the tone of the component, based on the intention of the information being conveyed.

* type

  "strong" | "generic" | "address" | "redundant"

  Provide semantic meaning and default styling to the text.

  Other presentation properties on Text override the default styling.

## Slots

* children

  HTMLElement

  The content of the Text.

### Examples

* #### Code

  ##### Default

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

## Useful 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.

## Best 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.