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.

TextBlock

The text block component renders a block of text that occupies the full width available, similar to a paragraph. Use text block for multi-line content like descriptions, policies, or explanatory copy.

For inline text styling within a sentence, use Text.

Support
Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the TextBlock component.

Anchor to appearance
appearance
'subdued' | 'accent' | 'decorative' | 'info' | 'success' | 'warning' | 'critical'

Changes the visual appearance of the text block, letting you convey meaning through color.

  • accent: Conveys emphasis and draws attention to the element.
  • 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.
  • decorative: Uses the decorative color set within the theme.
Anchor to emphasis
emphasis

Use to emphasize a word or a group of words within the text block. Set to bold or italic to apply typographic emphasis that communicates visual hierarchy or stress.

  • italic: Sets the text block in italic. Combine with an accessibilityRole of offset or stress to add more meaning to the text.
  • bold: Sets the text block in bold. Combine with an accessibilityRole of strong to add more meaning to the text.
Anchor to id
id
string

A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.

Anchor to inlineAlignment
inlineAlignment

Aligns the text along the inline axis. Use this to control the horizontal text alignment within the text block.

Anchor to size
size

A keyword that sets the size of the text block. Sizes map to the design system's type scale.

  • extraSmall: The smallest text size.
  • small: A smaller text size for secondary content.
  • base: The default text size for body content.
  • medium: A slightly larger text size.
  • large: A larger text size for emphasis.
  • extraLarge: The largest text size.

Anchor to ExamplesExamples

Anchor to Display a block of textDisplay a block of text

Render a full-width block of text content. This example displays a text block component as a paragraph.

Display a block of text

A text block component rendering a paragraph of text

Display a block of text

import {
reactExtension,
TextBlock,
BlockStack,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.page.render',
() => <Extension />,
);

function Extension() {
return (
<BlockStack>
<TextBlock>
We have a 30-day return policy, which
means you have 30 days after receiving
your item to request a return.
</TextBlock>
<TextBlock>
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.
</TextBlock>
</BlockStack>
);
}
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);
});

Anchor to Best practicesBest practices

  • Keep paragraphs focused: Limit each text block to a single idea for scannability.
  • Use appropriate size: Match the text size to the content hierarchy.
  • Use Text for inline styling: For emphasizing words within a text block, nest Text components inside.
Was this page helpful?