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

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

```

## TagProps

### TagProps

### children

value: `string`


### icon

value: `IconSource`

Icon source

### accessibilityLabel

value: `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

value: `() => void`

Callback when tag is removed

### id

value: `string`

A unique identifier for the component.