Migrate to the Polaris text component

The Polaris text component renders inline text with semantic meaning and styling. It replaces the previous Text component and is available as <s-text> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris text component.

Anchor to emphasisemphasis

The previous Text emphasis prop is now called type.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return <s-text type="strong">Total: $99.99</s-text>;
}

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

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return <Text emphasis="bold">Total: $99.99</Text>;
}

Anchor to accessibilityRoleaccessibilityRole

The previous Text accessibilityRole prop has been replaced with type for string roles, and separate components for object roles.

String roles:

Object roles:

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-text type="address">
      123 Main St, Toronto, ON
    </s-text>
  );
}

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

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Text accessibilityRole="address">
      123 Main St, Toronto, ON
    </Text>
  );
}

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <>
      <s-abbreviation title="Hypertext Markup Language">
        HTML
      </s-abbreviation>
      <s-time dateTime="2024-01-15">January 15, 2024</s-time>
      <s-text dir="rtl">שלום</s-text>
    </>
  );
}

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

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <>
      <Text
        accessibilityRole={{
          type: 'abbreviation',
          for: 'Hypertext Markup Language',
        }}
      >
        HTML
      </Text>
      <Text
        accessibilityRole={{
          type: 'datetime',
          machineReadable: '2024-01-15',
        }}
      >
        January 15, 2024
      </Text>
      <Text
        accessibilityRole={{
          type: 'directional-override',
          direction: 'rtl',
        }}
      >
        שלום
      </Text>
    </>
  );
}

Anchor to visibilityvisibility

The previous visibility="hidden" is now accessibilityVisibility="exclusive".

Anchor to Removed propertiesRemoved properties

Anchor to appearanceappearance

The Polaris text component no longer supports appearance. Use color and tone instead.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <>
      <s-text color="subdued">Optional</s-text>
      <s-text tone="critical">Payment failed</s-text>
    </>
  );
}

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

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <>
      <Text appearance="subdued">Optional</Text>
      <Text appearance="critical">Payment failed</Text>
    </>
  );
}

Anchor to sizesize

The Polaris text component no longer supports size. Use type="small" for small text, or <s-heading> for larger text.

Anchor to New propertiesNew properties

The Polaris text component introduces the following new properties: