---
title: Text
description: >-
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.
api_version: 2026-07
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/typography-and-content/text
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/typography-and-content/text.md
api_name: customer-account-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. For block-level text content, use [paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/typography-and-content/paragraph).
Text is inline by default — wrapping it around block-level content might cause unexpected layout behavior.
### Support Targets (24)
### Supported targets
* [customer-account.footer.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/footer#footer-render-after-)
* [customer-account.order-index.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-index-announcement-)
* [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-index-block-)
* [customer-account.order-status.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#order-status-announcement-)
* [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#order-status-block-)
* [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#cart-line-item-render-after-)
* [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#cart-line-list-render-after-)
* [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#customer-information-render-after-)
* [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.order-status.return-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/payments-and-returns#return-details-render-after-)
* [customer-account.order-status.unfulfilled-items.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-action-menu-item-)
* [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-action-)
* [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/full-page#order-specific-full-page-)
* [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/full-page#customer-account-full-page-)
* [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.profile.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-default#profile-announcement-)
* [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-default#profile-block-)
* [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.profile.company-location-addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.profile.company-location-payment.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.profile.company-location-staff.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.profile.payment.render-after
#### 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 account pages.
* **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**
**'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'**
**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**
**'address' | 'mark' | 'small' | '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 account pages. 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
```
***
## 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`.
***