Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.
Text
The text component provides semantic value and visual styling for a small piece of text content. Use text to emphasize or differentiate words or phrases within paragraphs or other block-level components.
For block-level text that occupies full width, use TextBlock.
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
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
Anchor to PropertiesProperties
Configure the following properties on the Text component.
- Anchor to accessibilityRoleaccessibilityRoleaccessibilityRoleTextAccessibilityRoleTextAccessibilityRole
Set the semantic of the component’s content
- Anchor to accessibilityVisibilityaccessibilityVisibilityaccessibilityVisibilityAccessibilityVisibilityAccessibilityVisibility
The visibility of the element to assistive technologies.
- Anchor to appearanceappearanceappearance'subdued' | 'accent' | 'decorative' | 'info' | 'success' | 'warning' | 'critical''subdued' | 'accent' | 'decorative' | 'info' | 'success' | 'warning' | 'critical'
Changes the visual appearance
- Anchor to emphasisemphasisemphasisEmphasisEmphasis
Use to emphasize a word or a group of words.
- Anchor to idididstringstring
Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action.
- Anchor to sizesizesizeTextSizeTextSize
Size of the text
- Anchor to visibilityvisibilityvisibilityVisibilityVisibility
The visual visibility of the element.
TextAccessibilityRole
'address' | 'deletion' | 'marking' | {type: 'abbreviation'; for?: string} | {type: 'directional-override'; direction: 'ltr' | 'rtl'} | {type: 'datetime'; machineReadable?: string} | 'stress' | 'offset' | 'strong'AccessibilityVisibility
Controls the visibility of an element to assistive technologies. - `hidden`: Hides the element from assistive technologies while keeping it visually visible.
'hidden'Emphasis
Use to emphasize a word or a group of words.
'italic' | 'bold'TextSize
A keyword that maps to a predefined text size from the design system. Includes all standard `Size` values plus `medium`, which sits between `base` and `large`.
Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | '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.
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'Visibility
Controls the visual visibility of an element. - `hidden`: Visually hides the element while keeping it accessible to assistive technologies. The element does not occupy visual space.
'hidden'Anchor to ExamplesExamples
Anchor to Style inline textStyle inline text
Apply visual styling to a small piece of inline text. This example renders a text component with default styling.Style inline text
Style inline text
React
import {
reactExtension,
Text,
BlockStack,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => <Extension />,
);
function Extension() {
return (
<BlockStack inlineAlignment="center">
<Text size="extraSmall">Total</Text>
<Text size="small">Total</Text>
<Text size="base">Total</Text>
<Text size="medium">Total</Text>
<Text size="large">Total</Text>
<Text size="extraLarge">Total</Text>
</BlockStack>
);
}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);
});Anchor to Best practicesBest practices
- Keep inline text short: Use text for words or phrases, not full paragraphs.
- Apply styles intentionally: Use emphasis and tone to convey meaning, not decoration.
- Use TextBlock for paragraphs: For block-level content, use TextBlock instead.