--- title: Text description: >- Text is used to visually style and provide semantic value for a small piece of text content. 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/text md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/text.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 Text is used to visually style and provide semantic value for a small piece of text content. ### 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 ## TextProps * **accessibilityRole** **TextAccessibilityRole** Set the semantic of the component’s content * **accessibilityVisibility** **AccessibilityVisibility** Changes the visibility of the element to assistive technologies. `hidden` hides the component from assistive technology (for example, a screen reader) but remains visually visible. * **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** Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action. * **size** **TextSize** Size of the text * **visibility** **Visibility** Changes the visibility of the element. `hidden` visually hides the component while keeping it accessible to assistive technology, such as screen readers. Hidden elements don't take any visual space contrary to CSS visibility: hidden; ### TextAccessibilityRole ```ts 'address' | 'deletion' | 'marking' | {type: 'abbreviation'; for?: string} | {type: 'directional-override'; direction: 'ltr' | 'rtl'} | {type: 'datetime'; machineReadable?: string} | 'stress' | 'offset' | 'strong' ``` ### AccessibilityVisibility ```ts 'hidden' ``` ### 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' ``` ### 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' ``` ### Visibility ```ts 'hidden' ``` Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/api/checkout-extensions/post-purchase/components/text-B_aD71jS.png) ### Examples * #### Basic Text ##### React ```tsx import { reactExtension, Text, BlockStack, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( Total Total Total Total Total Total ); } ``` ##### JS ```js import {extension, Text, BlockStack} from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const text = root.createComponent(BlockStack, undefined, [ root.createComponent(Text, {size: 'extraSmall'}, 'Total'), root.createComponent(Text, {size: 'small'}, 'Total'), root.createComponent(Text, {size: 'base'}, 'Total'), root.createComponent(Text, {size: 'medium'}, 'Total'), root.createComponent(Text, {size: 'large'}, 'Total'), root.createComponent(Text, {size: 'extraLarge'}, 'Total'), ]); root.appendChild(text); }); ``` ## 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 * Use larger text to emphasize content that’s not a heading, such as a price total. * Create contrast between more and less important text with properties such as `size` and `subdued`. ## Related [Component - Heading](heading) [Component - HeadingGroup](headinggroup) [Component - TextBlock](textblock)