Migrate Tag to Polaris chip components

Polaris chip components display compact labels or categorization markers. They replace the previous Tag component and are available as <s-chip> and <s-clickable-chip> in API versions 2025-10 and newer.

Choose the replacement based on how the Tag is used:

Anchor to Updated propertiesUpdated properties

Anchor to iconicon

The previous Tag icon prop has been replaced with a graphic slot. Place an <s-icon> inside the chip with slot="graphic". Only <s-icon> is supported in this slot.

When you move the icon name to <s-icon type="...">, update it to its Polaris web component equivalent. The chip uses the same icon names as the Polaris icon component.

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

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

function Extension() {
  return (
    <s-chip>
      <s-icon slot="graphic" type="discount"></s-icon>
      Free shipping
    </s-chip>
  );
}

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

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

function Extension() {
  return <Tag icon="discount">Free shipping</Tag>;
}

Anchor to onRemoveonRemove

The previous Tag onRemove prop is now supported on <s-clickable-chip> only. Set the removable prop to show the remove control, and listen for the remove event. In Preact, you still handle this with the onRemove prop, but the handler now receives an Event instead of being called with no arguments.

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

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

function Extension() {
  const [removed, setRemoved] = useState(false);

  if (removed) return null;

  return (
    <s-clickable-chip
      removable
      onRemove={() => {
        setRemoved(true);
      }}
    >
      <s-icon slot="graphic" type="discount"></s-icon>
      SAVE20
    </s-clickable-chip>
  );
}

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

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

function Extension() {
  const [removed, setRemoved] = useState(false);

  if (removed) return null;

  return (
    <Tag
      icon="discount"
      onRemove={() => {
        setRemoved(true);
      }}
    >
      SAVE20
    </Tag>
  );
}

Anchor to New propertiesNew properties

<s-clickable-chip> introduces the following new properties that weren't available on Tag: