> Deprecated:
> Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to [purchase options extensions](/docs/apps/build/purchase-options/purchase-options-extensions).


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


```ts?title: "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();
});


```

```tsx?title: "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? | <code>"critical" &#124; "code" &#124; "subdued" &#124; "success"</code> |  |
| emphasized? | <code>boolean</code> |  |
| id? | <code>string</code> | Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action.  |
| size? | <code>"extraSmall" &#124; "small" &#124; "base" &#124; "medium" &#124; "large" &#124; "extraLarge"</code> |  |
| strong? | <code>boolean</code> |  |

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