---
title: Text
description: >-
  The Text component is used to render text in different sizes, colors, and
  alignments.
api_name: product-subscription-extensions
source_url:
  html: 'https://shopify.dev/docs/api/product-subscription-extensions/components/text'
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/text.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/text.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/text.md#guidelines)

# Text

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

The Text component is used to render text in different sizes, colors, and alignments.

```ts
import {extend, Text} from '@shopify/admin-ui-extensions';


extend('Playground', (root) => {
  const formattedText = root.createComponent(Text, {
    appearance: 'success',
    emphasized: true,
    id: 'some_id',
    size: 'small',
    strong: true,
  });


  formattedText.appendChild('Formatted text is awesome!');


  const simpleText = root.createText('This simple text is a bit less awesome');


  root.appendChild(formattedText);
  root.appendChild(simpleText);


  root.mount();
});
```

```tsx
import React from 'react';
import {extend, render, Text} from '@shopify/admin-ui-extensions-react';


function App() {
  return (
    <>
      <Text size="small"
        emphasized
        subdued
        role='address'
        id='some_id'
        appearance='accent'
      >
        Formatted text is awesome!
      </Text>
      This simple text is a bit less awesome
    
  );
}


extend(
  'Playground',
  render(() => <App />),
);
```

##### JavaScript

```
import {extend, Text} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const formattedText = root.createComponent(Text, {
    appearance: 'success',
    emphasized: true,
    id: 'some_id',
    size: 'small',
    strong: true,
  });

  formattedText.appendChild('Formatted text is awesome!');

  const simpleText = root.createText('This simple text is a bit less awesome');

  root.appendChild(formattedText);
  root.appendChild(simpleText);

  root.mount();
});
```

##### React

```
import React from 'react';
import {extend, render, Text} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <>
      <Text size="small"
        emphasized
        subdued
        role='address'
        id='some_id'
        appearance='accent'
      >
        Formatted text is awesome!
      </Text>
      This simple text is a bit less awesome
    
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| appearance? | `"critical" \| "code" \| "subdued" \| "success"` | |
| emphasized? | `boolean` | |
| id? | `string` | Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action. |
| size? | `"extraSmall" \| "small" \| "base" \| "medium" \| "large" \| "extraLarge"` | |
| strong? | `boolean` | |

***

## Guidelines

Do not nest other components other than Text, they will be ignored and not rendered. Nested Text will be used to render the content of Text.

| ✅ Do | 🛑 Don't |
| - | - |
| Use Text to add rich content to your extension | Use the `Text` component for headings or block element text. Use `Heading` and `TextBlock` components instead. |
| Use size to (de)-emphasize your content | |

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/text.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/text.md#guidelines)