--- title: TextBlock description: >- Text block is used to render a block of text that occupies the full width available, like a paragraph. 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/textblock md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/textblock.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​Block Text block is used to render a block of text that occupies the full width available, like a paragraph. ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * customer-account.​footer.​render-after * customer-account.​order-index.​announcement.​render * customer-account.​order-index.​block.​render * customer-account.​order-status.​announcement.​render * customer-account.​order-status.​block.​render * customer-account.​order-status.​cart-line-item.​render-after * customer-account.​order-status.​cart-line-list.​render-after * customer-account.​order-status.​customer-information.​render-after * customer-account.​order-status.​fulfillment-details.​render-after * customer-account.​order-status.​payment-details.​render-after * customer-account.​order-status.​return-details.​render-after * customer-account.​order-status.​unfulfilled-items.​render-after * customer-account.​order.​action.​menu-item.​render * customer-account.​order.​action.​render * customer-account.​order.​page.​render * customer-account.​page.​render * customer-account.​profile.​addresses.​render-after * customer-account.​profile.​announcement.​render * customer-account.​profile.​block.​render * customer-account.​profile.​company-details.​render-after * customer-account.​profile.​company-location-addresses.​render-after * customer-account.​profile.​company-location-payment.​render-after * customer-account.​profile.​company-location-staff.​render-after * customer-account.​profile.​payment.​render-after ## TextBlockProps * **appearance** **Extract< Appearance, | 'accent' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'decorative' >** Changes the visual appearance * **emphasis** **Emphasis** Use to emphasize a word or a group of words. * **id** **string** A unique identifier for the component. * **inlineAlignment** **InlineAlignment** Align text along the main axis. * **size** **TextSize** Size of the text ### Appearance A keyword that maps to a predefined color or visual treatment from the design system. Used to convey meaning or emphasis through color. - \`base\`: The default color for the element set within the theme. - \`accent\`: Conveys emphasis and draws attention to the element. - \`decorative\`: Uses the \`decorative\` color set within the theme. - \`interactive\`: Conveys that the element is pressable or hoverable. Deprecated; use \`accent\` instead. - \`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. - \`monochrome\`: Takes the color of its parent, giving a uniform appearance. ```ts 'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome' ``` ### Emphasis Use to emphasize a word or a group of words. ```ts 'italic' | 'bold' ``` ### InlineAlignment Controls how content is aligned along the inline axis (horizontal in standard writing modes). - \`'start'\`: Aligns content to the inline start of the container. - \`'center'\`: Centers content along the inline axis. - \`'end'\`: Aligns content to the inline end of the container. ```ts 'start' | 'center' | 'end' ``` ### TextSize ```ts Extract | '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' ``` Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/textblock-default-Z7kG9xwo.png) ### Examples * #### Basic TextBlock ##### React ```tsx import { reactExtension, TextBlock, BlockStack, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( We have a 30-day return policy, which means you have 30 days after receiving your item to request a return. To be eligible for a return, your item must be in the same condition that you received it, unworn or unused, with tags, and in its original packaging. You’ll also need the receipt or proof of purchase. ); } ``` ##### JS ```js import { extension, TextBlock, BlockStack, } from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const textBlock = root.createComponent(BlockStack, undefined, [ root.createComponent( TextBlock, undefined, 'We have a 30-day return policy, which means you have 30 days after receiving your item to request a return.', ), root.createComponent( TextBlock, undefined, 'To be eligible for a return, your item must be in the same condition that you received it, unworn or unused, with tags, and in its original packaging. You’ll also need the receipt or proof of purchase.', ), ]); root.appendChild(textBlock); }); ``` ## Appearance | Value | Description | | - | - | | `"accent"` | Conveys emphasis and draws attention to the element. | | `"subdued"` | Conveys a subdued or disabled state for the element. | | `"info"` | Conveys that the element is informative or has information. | | `"success"` | Convey a successful interaction. | | `"warning"` | Convey something needs attention or an action needs to be taken. | | `"critical"` | Conveys a problem has arisen. | ## Best Practices * Create contrast between more and less important text with properties such as `size`, `emphasis`, and `appearance`. ## Related [Component - Heading](heading) [Component - HeadingGroup](headinggroup) [Component - Text](text)