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

A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart.

Support

Targets (50)

Supported targets

Checkout::Actions::RenderBefore
Checkout::CartLineDetails::RenderAfter
Checkout::CartLines::RenderAfter
Checkout::Contact::RenderAfter
Checkout::CustomerInformation::RenderAfter
Checkout::DeliveryAddress::RenderBefore
Checkout::Dynamic::Render
Checkout::PickupLocations::RenderAfter
Checkout::PickupLocations::RenderBefore
Checkout::PickupPoints::RenderAfter
Checkout::PickupPoints::RenderBefore
Checkout::Reductions::RenderAfter
Checkout::Reductions::RenderBefore
Checkout::ShippingMethodDetails::RenderAfter
Checkout::ShippingMethodDetails::RenderExpanded
Checkout::ShippingMethods::RenderAfter
Checkout::ShippingMethods::RenderBefore
Checkout::ThankYou::CartLineDetails::RenderAfter
Checkout::ThankYou::CartLines::RenderAfter
Checkout::ThankYou::CustomerInformation::RenderAfter
Checkout::ThankYou::Dynamic::Render
purchase.checkout.actions.render-before
purchase.checkout.block.render
purchase.checkout.cart-line-item.render-after
purchase.checkout.cart-line-list.render-after
purchase.checkout.contact.render-after
purchase.checkout.delivery-address.render-after
purchase.checkout.delivery-address.render-before
purchase.checkout.footer.render-after
purchase.checkout.header.render-after
purchase.checkout.payment-method-list.render-after
purchase.checkout.payment-method-list.render-before
purchase.checkout.pickup-location-list.render-after
purchase.checkout.pickup-location-list.render-before
purchase.checkout.pickup-location-option-item.render-after
purchase.checkout.pickup-point-list.render-after
purchase.checkout.pickup-point-list.render-before
purchase.checkout.reductions.render-after
purchase.checkout.reductions.render-before
purchase.checkout.shipping-option-item.details.render
purchase.checkout.shipping-option-item.render-after
purchase.checkout.shipping-option-list.render-after
purchase.checkout.shipping-option-list.render-before
purchase.thank-you.announcement.render
purchase.thank-you.block.render
purchase.thank-you.cart-line-item.render-after
purchase.thank-you.cart-line-list.render-after
purchase.thank-you.customer-information.render-after
purchase.thank-you.footer.render-after
purchase.thank-you.header.render-after

Anchor to ExamplesExamples

Anchor to Basic TagBasic Tag

Basic Tag

Basic Tag

import {

reactExtension,

Tag,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

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

}

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

export default extension('purchase.checkout.block.render', (root) => {

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

root.appendChild(tag);

});

React

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

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

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

JS

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

export default extension('purchase.checkout.block.render', (root) => {
  const tag = root.createComponent(Tag, {icon: 'discount'}, 'SPRING');

  root.appendChild(tag);
});

Anchor to PropertiesProperties

Anchor to tagpropsTagProps

A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart.

Anchor to accessibilityLabel accessibilityLabel string: A label used for buyers 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: Icon source
Anchor to id id string: A unique identifier for the component.
Anchor to onRemove onRemove () => void: Callback when tag is removed

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'

Was this page helpful?