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