Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

Tag

The tag component displays a label used to categorize or organize content. Use tag to show applied discounts, categories, or status labels.

Tags provide a compact way to display metadata or classifications alongside other content.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Tag component.

Anchor to accessibilityLabel accessibilityLabel string: A label used for users using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.
Anchor to children children string
Anchor to icon icon: The source of the icon displayed inside the tag. Pass a valid icon source to render a visual indicator alongside the tag label.
Anchor to id id string: A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.
Anchor to onRemove onRemove () => void: A callback fired when the tag is removed by the user.

IconSource

The name of the icon to display. Each value maps to a specific pictogram from the icon set.

'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowUpRight' | 'arrowDown' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caretDown' | 'cart' | 'cashDollar' | 'categories' | 'checkmark' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronDown' | 'clipboard' | 'clock' | 'close' | 'creditCard' | 'critical' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'email' | 'error' | 'errorFill' | 'external' | 'filter' | 'geolocation' | 'gift' | 'giftFill' | 'grid' | 'hamburger' | 'hollowCircle' | 'horizontalDots' | 'image' | 'info' | 'infoFill' | 'list' | 'lock' | 'magnify' | 'map' | 'marker' | 'minus' | 'mobile' | 'note' | 'orderBox' | 'pen' | 'plus' | 'profile' | 'question' | 'questionFill' | 'reorder' | 'reset' | 'return' | 'savings' | 'settings' | 'star' | 'starFill' | 'starHalf' | 'store' | 'success' | 'truck' | 'upload' | 'verticalDots' | 'warning' | 'warningFill'

Anchor to ExamplesExamples

Anchor to Display a labelDisplay a label

Show a compact label for categorization or metadata. This example renders a tag component with a text label.

Display a label

A tag component displaying a categorization label

Display a label

import {

reactExtension,

Tag,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return <Tag icon="discount">SPRING</Tag>;

}

import {extension, Tag} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {

const tag = root.createComponent(Tag, {icon: 'discount'}, 'SPRING');

root.appendChild(tag);

});

React

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

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

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

JS

import {extension, Tag} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const tag = root.createComponent(Tag, {icon: 'discount'}, 'SPRING');

  root.appendChild(tag);
});

Anchor to Best practicesBest practices

Keep labels short: Tags work best with one or two words.
Use for classification: Tags should label or categorize, not provide instructions or actions.

Anchor to LimitationsLimitations

Tags are display-only and don't support interactive actions like removal or editing.

Was this page helpful?