---
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: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/text
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/text.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# Text

The text component provides semantic value and visual styling for a small piece of text content. Use text to emphasize or differentiate words or phrases within paragraphs or other block-level components.

For block-level text that occupies full width, use [TextBlock](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/textblock).

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/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/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Inline emphasis**: Highlight important words or phrases within a paragraph.
* **Status labels**: Display inline status indicators like "Active" or "Pending."
* **Price annotations**: Style price amounts or discount text within content.
* **Helper text**: Provide supplementary inline context or instructions.

***

## Properties

Configure the following properties on the Text component.

* **accessibilityRole**

  **TextAccessibilityRole**

  Sets the semantic meaning of the text content for assistive technologies. When set, the role conveys additional context about the text's purpose.

  * `address`: Indicates the text is contact information. Typically used for addresses.
  * `deletion`: Indicates the text has been deleted. Typically used for discounted prices.
  * `marking`: Indicates the text is marked or highlighted and relevant to the user's current action.
  * `stress`: Indicates emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.
  * `offset`: Indicates an offset from the normal prose of the text. Typically used for a foreign word or fictional character thoughts.
  * `strong`: Indicates strong importance, seriousness, or urgency.

* **accessibilityVisibility**

  **AccessibilityVisibility**

  Controls the visibility of the element to assistive technologies. Set to `'hidden'` to hide the element from assistive technologies while keeping it visually visible.

* **appearance**

  **'subdued' | 'accent' | 'decorative' | 'info' | 'success' | 'warning' | 'critical'**

  Changes the visual appearance of the text, letting you convey meaning through color.

  * `accent`: Conveys emphasis and draws attention to the element.
  * `subdued`: Conveys a subdued or disabled state.
  * `info`: Conveys informational content.
  * `success`: Conveys a successful interaction.
  * `warning`: Conveys something needs attention or action.
  * `critical`: Conveys a problem has arisen.
  * `decorative`: Uses the `decorative` color set within the theme.

* **emphasis**

  **Emphasis**

  Use to emphasize a word or a group of words. Set to `bold` or `italic` to apply typographic emphasis that communicates visual hierarchy or stress.

  * `italic`: Sets the text in italic. Combine with an `accessibilityRole` of `offset` or `stress` to add more meaning to the text.
  * `bold`: Sets the text in bold. Combine with an `accessibilityRole` of `strong` to add more meaning to the text.

* **id**

  **string**

  A unique identifier for the component. Typically used as a target for another component's controls to associate an accessible label with an action.

* **size**

  **TextSize**

  A keyword that sets the size of the text. Sizes map to the design system's type scale.

  * `extraSmall`: The smallest text size.
  * `small`: A smaller text size for secondary content.
  * `base`: The default text size for body content.
  * `medium`: A slightly larger text size.
  * `large`: A larger text size for emphasis.
  * `extraLarge`: The largest text size.

* **visibility**

  **Visibility**

  Controls the visual visibility of the element. Set to `'hidden'` to visually hide the element while keeping it accessible to assistive technologies.

### TextAccessibilityRole

The subset of accessibility roles available to the text component. Each role conveys specific semantic meaning to assistive technologies, helping users understand the purpose and context of the text content.

```ts
'address' | 'deletion' | 'marking' | {type: 'abbreviation'; for?: string} | {type: 'directional-override'; direction: 'ltr' | 'rtl'} | {type: 'datetime'; machineReadable?: string} | 'stress' | 'offset' | 'strong'
```

### AccessibilityVisibility

Controls the visibility of an element to assistive technologies. - \`hidden\`: Hides the element from assistive technologies while keeping it visually visible.

```ts
'hidden'
```

### Emphasis

A keyword that controls typographic emphasis on a text component. Use emphasis to draw attention to a word or group of words within a passage.

```ts
'italic' | 'bold'
```

### TextSize

A keyword that maps to a predefined text size from the design system. Includes all standard \`Size\` values plus \`medium\`, which sits between \`base\` and \`large\`.

```ts
Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'
```

### Size

A keyword that maps to a predefined size from the design system's size scale. Components use a subset of these values depending on which sizes they support. - \`extraSmall\`: The smallest available size. - \`small\`: A compact size, smaller than the default. - \`base\`: The default size, appropriate for most contexts. - \`large\`: A larger size for increased visual prominence. - \`extraLarge\`: The largest available keyword size. - \`fill\`: Stretches to fill the available space in the container.

```ts
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
```

### Visibility

Controls the visual visibility of an element. - \`hidden\`: Visually hides the element while keeping it accessible to assistive technologies. The element does not occupy visual space.

```ts
'hidden'
```

***

## Examples

### Style inline text

Apply visual styling to a small piece of inline text. This example renders a text component with default styling.

## Style inline text

![A text component styling inline text content](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/text-B_aD71jS.png)

## Style inline text

##### React

```tsx
import {
  reactExtension,
  Text,
  BlockStack,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <BlockStack inlineAlignment="center">
      <Text size="extraSmall">Total</Text>
      <Text size="small">Total</Text>
      <Text size="base">Total</Text>
      <Text size="medium">Total</Text>
      <Text size="large">Total</Text>
      <Text size="extraLarge">Total</Text>
    </BlockStack>
  );
}
```

##### JS

```js
import {extension, Text, BlockStack} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const text = root.createComponent(BlockStack, undefined, [
    root.createComponent(Text, {size: 'extraSmall'}, 'Total'),
    root.createComponent(Text, {size: 'small'}, 'Total'),
    root.createComponent(Text, {size: 'base'}, 'Total'),
    root.createComponent(Text, {size: 'medium'}, 'Total'),
    root.createComponent(Text, {size: 'large'}, 'Total'),
    root.createComponent(Text, {size: 'extraLarge'}, 'Total'),
  ]);

  root.appendChild(text);
});
```

***

## Best practices

* **Keep inline text short**: Use text for words or phrases, not full paragraphs.
* **Apply styles intentionally**: Use emphasis and tone to convey meaning, not decoration.
* **Use TextBlock for paragraphs**: For block-level content, use TextBlock instead.

***