Skip to main content
Migrate to Polaris

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 renders inline text with support for font weight, style, variant, overflow behavior, and accessibility roles. Use it for non-heading, non-paragraph text that needs typographic control, such as labels, metadata, or emphasized words within a sentence.

For block-level text with spacing, use Paragraph. For titles and section headings, use Heading.

Support
Targets (46)

Supported targets

Anchor to PropertiesProperties

Props for the Text component, an inline element for rendering and styling a run of text. Use Text to apply typographic treatments such as font weight, style, variant, and overflow behavior to a portion of content.

Anchor to accessibilityRole
accessibilityRole

The semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.

Anchor to fontStyle
fontStyle

The styling of the font's letter forms.

Anchor to fontVariant
fontVariant
| []

The font variant options that control the usage of alternate glyphs. You can pass a single value or an array of values to combine multiple variants.

Anchor to fontWeight
fontWeight

The weight (or boldness) of the font. Use heavier weights to create visual emphasis or establish hierarchy in your content.

Anchor to id
id
string

A unique identifier for the text element. When not set, a globally unique value is used instead.

Anchor to textOverflow
textOverflow

The behavior for signaling hidden overflow content to users.

Anchor to ExamplesExamples

Anchor to Highlight product pricingHighlight product pricing

Differentiate a current price from a compare-at price with bold and italic styling. This example uses Text with fontWeight for the current price and fontStyle for the compare-at value, showing how props change the visual weight of inline content.

Highlight product pricing

Differentiate a current price from a compare-at price with bold and italic styling. This example uses `Text` with `fontWeight` for the current price and `fontStyle` for the compare-at value, showing how props change the visual weight of inline content.

Highlight product pricing

import {reactExtension, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<BlockStack>
<Text>Current price: </Text>
<Text fontWeight="bold">$49.99</Text>
<Text fontWeight="bold" fontStyle="italic">
Compare at: $64.99
</Text>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {
const stack = root.createComponent(BlockStack);

const label = root.createComponent(
Text,
{},
'Current price: ',
);

const price = root.createComponent(
Text,
{fontWeight: 'bold'},
'$49.99',
);

const compare = root.createComponent(
Text,
{fontWeight: 'bold', fontStyle: 'italic'},
'Compare at: $64.99',
);

stack.appendChild(label);
stack.appendChild(price);
stack.appendChild(compare);
root.appendChild(stack);
},
);

Anchor to Emphasize text for screen readersEmphasize text for screen readers

Communicate product status warnings with proper screen reader semantics using fontStyle and accessibilityRole. This example marks a draft status notice with emphasis and an action-required message with strong, so assistive technology conveys the visual urgency correctly.

Emphasize text for screen readers

import {reactExtension, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<BlockStack>
<Text fontStyle="italic" accessibilityRole="emphasis">
This product is currently in draft status and not visible to customers.
</Text>
<Text fontWeight="bold" accessibilityRole="strong">
Action required: Complete all required fields before publishing.
</Text>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const stack = root.createComponent(BlockStack);

const status = root.createComponent(
Text,
{
fontStyle: 'italic',
accessibilityRole: 'emphasis',
},
'This product is currently in draft status and not visible to customers.',
);

const note = root.createComponent(
Text,
{
fontWeight: 'bold',
accessibilityRole: 'strong',
},
'Action required: Complete all required fields before publishing.',
);

stack.appendChild(status);
stack.appendChild(note);
root.appendChild(stack);
},
);

Anchor to Truncate long descriptionsTruncate long descriptions

Prevent long product descriptions from breaking your layout using textOverflow="ellipsis". This example truncates content that exceeds its container width, keeping the block extension UI compact while still displaying the beginning of the text.

Truncate long descriptions

import {reactExtension, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (
<BlockStack>
<Text fontWeight="bold">Product description</Text>
<Text textOverflow="ellipsis">
This premium organic cotton t-shirt features a relaxed fit with
reinforced stitching, available in twelve colors with custom embroidery
options for wholesale orders.
</Text>
</BlockStack>
);
}

export default reactExtension(
'admin.product-details.block.render',
() => <App />,
);
import {extension, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
'admin.product-details.block.render',
(root) => {

const stack = root.createComponent(BlockStack);

const label = root.createComponent(
Text,
{fontWeight: 'bold'},
'Product description',
);

const description = root.createComponent(
Text,
{textOverflow: 'ellipsis'},
'This premium organic cotton t-shirt features a relaxed fit with reinforced stitching, available in twelve colors with custom embroidery options for wholesale orders.',
);

stack.appendChild(label);
stack.appendChild(description);
root.appendChild(stack);
},
);

Anchor to Best practicesBest practices

  • Use bold sparingly: Apply fontWeight to emphasize key words or values within a sentence, not entire paragraphs. Overusing bold dilutes its impact and makes content harder to scan.
  • Use Paragraph for block-level text: Text renders inline by default. For block-level content with appropriate spacing between blocks, use the Paragraph component instead.

Anchor to LimitationsLimitations

  • Text renders inline and flows with surrounding content. It doesn't add vertical spacing or block-level behavior. For block-level text with built-in spacing, use the Paragraph component.
  • The textOverflow prop only takes effect when the parent container constrains the available width. Without a width constraint, text will wrap rather than truncate.
  • Text doesn't support color or tone props. To communicate status through color, use the Badge component instead.
Was this page helpful?