---
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: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/titles-and-text/text
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/titles-and-text/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

* #### Code

  ##### Default

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

## Preview

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

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