---
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_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/text
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/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'**

  **Default: 'visible'**

  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'**

  **Default: 'base'**

  Modify the color to be more or less intense.

* **dir**

  **'ltr' | 'rtl' | 'auto' | ''**

  **Default: ''**

  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)

* **display**

  **MaybeResponsive<"auto" | "none">**

  **Default: 'auto'**

  Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).

  * `auto`: the component’s initial value. The actual value depends on the component and context.
  * `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.

* **id**

  **string**

  A unique identifier for the element.

* **lang**

  **string**

  **Default: ''**

  Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)

  It is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.

* **tone**

  **'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'**

  **Default: 'auto'**

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

* **type**

  **'small' | 'address' | 'mark' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'**

  **Default: 'generic'**

  Provide semantic meaning and default styling to the text.

  Other presentation properties on Text override the default styling.

### MaybeResponsive

```ts
T | `@container${string}`
```

Examples

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2026-01/text-default.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-text type="small" color="subdued">
    All transactions are secure and encrypted.
  </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.