> 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 (
<>
Formatted text is awesome!
This simple text is a bit less awesome
>
);
}
extend(
'Playground',
render(() => ),
);
```
## 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 | |