---
title: Text
description: >-
Display inline text with specific visual styles or tones, such as to emphasize
words within paragraphs or block content.
api_version: 2026-07-rc
source_url:
html: >-
https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/text
md: >-
https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/text.md
api_name: checkout-ui-extensions
---
# Text
The text component displays inline text with specific visual styles or tones. Use text to emphasize or differentiate words or phrases within paragraphs or other block-level components, applying weight, color, or semantic styling.
Text supports multiple visual variants, tone, and color options for flexible inline typography control. Text is commonly used inside [paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/paragraph) to style specific words or phrases within block-level content.
Text is inline by default — wrapping it around block-level content might cause unexpected layout behavior.
### Support Targets (29)
### Supported targets
* [purchase.checkout.actions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation#navigation-target)
* [purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/block#block-target)
* [purchase.checkout.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#line-item-targets)
* [purchase.checkout.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-cart-line-list-)
* [purchase.checkout.contact.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/information#information-target)
* [purchase.checkout.delivery-address.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-delivery-address-)
* [purchase.checkout.delivery-address.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#delivery-address-targets)
* [purchase.checkout.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/footer#footer-target)
* [purchase.checkout.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/header#header-target)
* [purchase.checkout.payment-method-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#render-after-payment-methods-)
* [purchase.checkout.payment-method-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#payment-targets)
* [purchase.checkout.pickup-location-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#render-after-pickup-locations-)
* [purchase.checkout.pickup-location-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-list-targets)
* [purchase.checkout.pickup-location-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-option-item-target)
* [purchase.checkout.pickup-point-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#render-after-pickup-points-)
* [purchase.checkout.pickup-point-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#pickup-points-targets)
* [purchase.checkout.reductions.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-reductions-after-)
* [purchase.checkout.reductions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#reductions-targets)
* [purchase.checkout.shipping-option-item.details.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-item-targets)
* [purchase.checkout.shipping-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-option-)
* [purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-options-)
* [purchase.checkout.shipping-option-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-list-targets)
* [purchase.thank-you.announcement.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/announcement#thank-you-announcement-)
* [purchase.thank-you.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/block#block-target)
* [purchase.thank-you.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#line-item-targets)
* [purchase.thank-you.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#thank-you-cart-line-list-)
* [purchase.thank-you.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/information#information-target)
* [purchase.thank-you.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/footer#footer-target)
* [purchase.thank-you.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/header#header-target)
#### Use cases
* **Inline emphasis**: Bold or style specific words within a paragraph for visual contrast.
* **Security reassurance**: Display subdued helper text like "Your data is encrypted" near payment fields.
* **Policy highlights**: Apply strong emphasis and neutral tone to terms or disclaimers.
* **Price annotations**: Render inline labels like "Total" or "Tax included" alongside monetary values.
***
## Properties
Configure the following properties on the text component.
* **accessibilityVisibility**
**'visible' | 'hidden' | 'exclusive'**
**Default: 'visible'**
Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.
* `visible`: The element is visible to all users (both sighted users and screen readers).
* `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.
* `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.
* **color**
**'base' | 'subdued'**
**Default: 'base'**
The color emphasis level that controls visual intensity.
* `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.
* `base`: Primary color for body text, standard UI elements, and general content with good readability.
* `strong`: Higher-contrast color for text that needs more emphasis than `base`.
* **dir**
**'ltr' | 'rtl' | 'auto' | ''**
**Default: ''**
Indicates the directionality of the element’s text.
* `ltr`: The languages written from left to right (such as English).
* `rtl`: The languages written from right to left (such as Arabic).
* `auto`: The user agent determines the direction based on the content.
* `""`: The direction is inherited from parent elements (equivalent to not setting the attribute).
Learn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).
* **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.
Learn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
* **id**
**string**
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
* **lang**
**string**
**Default: ''**
The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation.
The value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).
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'**
The semantic meaning and color treatment of the component.
* `auto`: Automatically determined based on context.
* `neutral`: General information without specific intent.
* `info`: Informational content or helpful tips.
* `success`: Positive outcomes or successful states.
* `caution`: Advisory notices that need attention.
* `warning`: Important warnings about potential issues.
* `critical`: Urgent problems or destructive actions.
* `accent`: Highlighted or promotional content.
* `custom`: Custom styling controlled by your theme.
* **type**
**'small' | 'address' | 'mark' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'**
**Default: 'generic'**
The semantic type and styling treatment for the text content.
Other presentation properties on `s-text` override the default styling.
* `address`: A semantic type that indicates the text is contact information. Typically used for addresses.
* `redundant`: A semantic type that indicates the text is no longer accurate or no longer relevant. One such use-case is discounted prices.
* `mark`: A semantic type that indicates the text is marked or highlighted and relevant to the user's current action.
* `emphasis`: A semantic type that indicates emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.
* `offset`: A semantic type that indicates an offset from the normal prose of the text.
* `small`: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.
* `strong`: A semantic type that indicates strong importance, seriousness, or urgency.
* `generic`: No additional semantics or styling is applied.
### MaybeResponsive
Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string. - \`T\`: Base value that applies in all conditions. - \`@container${string}\`: Container query string for conditional responsive styling based on container size.
```ts
T | `@container${string}`
```
***
## Examples
### Display subdued text
Display subdued security text near payment fields. This example renders an `s-text` with `type="small"` and `color="subdued"` for a security reassurance message.
## Display subdued text
## html
```html
All transactions are secure and encrypted.
```
### Emphasize important information
Apply strong emphasis and neutral tone to informational text. This example sets `type="strong"` with `tone="neutral"` for policy copy that shouldn't read as success or warning.
## html
```html
By placing this order, you agree to our terms of sale.
```
### Mix regular and strong text in one line
Pair a label with emphasized values inside the same sentence. This example places two `s-text` elements inline, one default and one with `type="strong"`.
## html
```html
Total: $49.99
```
### Use text within a paragraph
Nest `s-text` inside `s-paragraph` to highlight specific values within body text. This example emphasizes the total price with `type="strong"` while the rest of the sentence remains at default weight.
## html
```html
Estimated total: $42.99 including tax and shipping.
```
***
## Best practices
* **Apply tone intentionally**: Set `tone` to convey semantic meaning like success or warning rather than using color alone.
* **Keep inline text short**: Use `s-text` for words or phrases, not full paragraphs. For block-level content, use `s-paragraph`.
***