---
title: TextBlock
description: >-
  TextBlock is used to render a block of text that occupies the full width
  available.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/textblock
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/textblock.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/textblock.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/textblock.md#guidelines)

# TextBlock

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

TextBlock is used to render a block of text that occupies the full width available. Usually used to render paragraphs of text.

##### JavaScript

```ts
import {extend, TextBlock} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const textBlock = root.createComponent(TextBlock, {size: 'small', variation: 'subdued'}, 'TextBlock');

  root.appendChild(textBlock);
  root.mount();
});
```

##### React

```tsx
import React from 'react';
import {extend, render, TextBlock} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <TextBlock size="small" variation="subdued">
      TextBlock
    </TextBlock>
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| size? | `"small" \| "base" \| "medium" \| "large" \| "extraLarge"` | Size of the text |
| variation? | `"positive" \| "negative" \| "strong" \| "subdued" \| "code"` | Give text additional visual meaning |

***

## Guidelines

* `TextBlock` is used to render a block of text that occupies the full width available. Usually used to render paragraphs of text.
* Use `variation` to give visual meaning to your content and `size` to adjust the font size.

| ✅ Do | 🛑 Don't |
| - | - |
| Ensure that text styles are used to enhance the information provided in text. | Don’t rely on text style alone to convey information to merchants. |

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/textblock.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/textblock.md#guidelines)