TextBlock

Deprecated

Product subscription app extensions won't be supported as of August 10, 2026. You should migrate existing product subscription app extensions to 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.

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();

});

import React from 'react';

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

function App() {

return (

TextBlock

</TextBlock>

);

}

extend(

'Playground',

render(() => <App />),

);

JavaScript

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

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 />),
);

Anchor to PropsProps

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

Anchor to GuidelinesGuidelines

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.

Was this page helpful?