# @commercetools-uikit/tag
> A tag is often used for items that need to be labeled or categorized.
Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install @commercetools-uikit/tag
pnpm add @commercetools-uikit/tag
yarn add @commercetools-uikit/tag
bun add @commercetools-uikit/tag
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 20.6.7 |
| Published | 2026-07-17 |
| First published | 2019-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 134.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 154 |
| Maintainers | emmenko, commercetools-admin, tdeekens |
| Keywords | javascript, typescript, design-system, react, uikit |
## Links
- npm: https://www.npmjs.com/package/@commercetools-uikit/tag
- Repository: https://github.com/commercetools/ui-kit
- Homepage: https://uikit.commercetools.com
- Issues: https://github.com/commercetools/ui-kit/issues
- npm.io page: https://npm.io/package/@commercetools-uikit/tag
## Dependencies (13)
- [history](https://npm.io/package/history.md) 4.10.1
- [react-intl](https://npm.io/package/react-intl.md) ^7.1.4
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.5
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13
- [@commercetools-uikit/text](https://npm.io/package/@commercetools-uikit/text.md) ^20.6.7
- [@commercetools-uikit/icons](https://npm.io/package/@commercetools-uikit/icons.md) ^20.6.7
- [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) ^20.6.7
- [@commercetools-uikit/spacings](https://npm.io/package/@commercetools-uikit/spacings.md) ^20.6.7
- [@commercetools-uikit/constraints](https://npm.io/package/@commercetools-uikit/constraints.md) ^20.6.7
- [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7
- [@commercetools-uikit/accessible-button](https://npm.io/package/@commercetools-uikit/accessible-button.md) ^20.6.7
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 20.6.7 (latest) — 2026-07-17
- 0.0.0-canary-20260831181816 (canary) — 2026-08-31
- 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18
- 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13
- 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19
- 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28
- 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27
- 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09
- 0.0.0-main-20250115172531 (main) — 2025-01-15
- 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13
- 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12
- 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11
- 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10
- 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04
- 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24
- … 1124 more at https://npm.io/package/@commercetools-uikit/tag/versions
## README
# Tag
## Description
A tag is often used for items that need to be labeled or categorized. This might apply to search terms or categories of a product. Tags can also have a "remove" button.
## Where to use
Main Functions and use cases are:
- Remove from a set _example: Removing products from categories_
- Showing a set _example: List of categories a product is in_
## Installation
```
pnpm add @commercetools-uikit/tag
```
```
npm --save install @commercetools-uikit/tag
```
Additionally install the peer dependencies (if not present)
```
pnpm add react react-router-dom
```
```
npm --save install react react-router-dom
```
## Usage
```jsx
import { Tag } from '@commercetools-uikit/tag';
const Example = () => (
{}}
>
Icecream
);
export default Example;
```
## Properties
| Props | Type | Required | Default | Description |
| ---------------------- | ----------------------------------------------------------------------------------------------------------- | :------: | ----------- | ------------------------------------------------------------------------------------- |
| `type` | `union`
Possible values:
`'normal' , 'warning'` | | | Indicates color scheme of the tag.
@deprecated use `tone` instead |
| `styles` | `Record` | | | Styles object that is spread into the tag body. |
| `to` | `union`
Possible values:
`string , LocationDescriptor` | | | Link of the tag when not disabled |
| `isDisabled` | `boolean` | | `false` | Disable the tag element along with the option to remove it. |
| `isDraggable` | `boolean` | | `false` | Adds the draggable icon on the left side. |
| `onRemove` | `Function`
[See signature.](#signature-onremove) | | | Called when remove button is clicked. |
| `onClick` | `Function`
[See signature.](#signature-onclick) | | | Called when tag element is clicked. This is not called when remove button is clicked. |
| `horizontalConstraint` | `union`
Possible values:
`, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the tag. |
| `children` | `ReactNode` | ✅ | | Content rendered within the tag |
| `tone` | `union`
Possible values:
`'primary' , 'warning' , 'surface'` | | `'primary'` | Indicates the color scheme of the tag. |
## Signatures
### Signature `onRemove`
```ts
(
event: MouseEvent | KeyboardEvent
) => void
```
### Signature `onClick`
```ts
(event: MouseEvent) => void
```
# TagList
## Description
A `TagList` component is used as wrapper for the list of tags. It has predefined spacings and flex display so that tags are grouped next to each other.
## Usage
The `` component accepts `` element as `children` props.
Here's an example of how to use them:
```jsx
import { Tag, TagList } from '@commercetools-uikit/tag';
const Example = () => (
{['apple', 'orange'].map((tag, index) => (
{tag}
))}
);
export default Example;
```
---
_Source: https://npm.io/package/@commercetools-uikit/tag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._