Text

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

The Text component is used to render text in different sizes, colors, and alignments.

import {extend, Text} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {

const formattedText = root.createComponent(Text, {

appearance: 'success',

emphasized: true,

id: 'some_id',

size: 'small',

strong: true,

});

formattedText.appendChild('Formatted text is awesome!');

const simpleText = root.createText('This simple text is a bit less awesome');

root.appendChild(formattedText);

root.appendChild(simpleText);

root.mount();

});

import React from 'react';

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

function App() {

return (

<Text size="small"

emphasized

subdued

role='address'

id='some_id'

appearance='accent'

Formatted text is awesome!

</Text>

This simple text is a bit less awesome

);

}

extend(

'Playground',

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

);

import {extend, Text} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const formattedText = root.createComponent(Text, {
    appearance: 'success',
    emphasized: true,
    id: 'some_id',
    size: 'small',
    strong: true,
  });

  formattedText.appendChild('Formatted text is awesome!');

  const simpleText = root.createText('This simple text is a bit less awesome');

  root.appendChild(formattedText);
  root.appendChild(simpleText);

  root.mount();
});

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

function App() {
  return (
    <>
      <Text size="small"
        emphasized
        subdued
        role='address'
        id='some_id'
        appearance='accent'
      >
        Formatted text is awesome!
      </Text>
      This simple text is a bit less awesome
    
  );
}

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

Anchor to PropsProps

optional = ?

Name	Type	Description
appearance?	`"critical" \| "code" \| "subdued" \| "success"`
emphasized?	`boolean`
id?	`string`	Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action.
size?	`"extraSmall" \| "small" \| "base" \| "medium" \| "large" \| "extraLarge"`
strong?	`boolean`

Anchor to GuidelinesGuidelines

Do not nest other components other than Text, they will be ignored and not rendered. Nested Text will be used to render the content of Text.

✅ Do	🛑 Don't
Use Text to add rich content to your extension	Use the `Text` component for headings or block element text. Use `Heading` and `TextBlock` components instead.
Use size to (de)-emphasize your content

Was this page helpful?