---
title: Tag
description: 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.
api_version: 2023-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/tag
  md: https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/tag.md
---

# 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.

## TagProps

* **children**

  **string**

* **icon**

  **IconSource**

  Icon source

* **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.

* **onRemove**

  **() => void**

  Callback when tag is removed

* **id**

  **string**

  A unique identifier for the component.

### IconSource

```ts
'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowUpRight' | 'arrowDown' | 'bag' | 'calendar' | 'camera' | 'caretDown' | 'cart' | 'checkmark' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'chevronDown' | 'clock' | 'close' | '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' | 'return' | 'store' | 'success' | 'truck' | 'verticalDots' | 'warning' | 'warningFill'
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/tag-default-BsAHEDcZ.png)

### Examples

* #### Basic Tag

  ##### React

  ```tsx
  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

  ```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);
  });
  ```