# @snack-uikit/tag

> `npm i @snack-uikit/tag`

Latest version **1.0.1** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/tag
pnpm add @snack-uikit/tag
yarn add @snack-uikit/tag
bun add @snack-uikit/tag
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-09-21 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 180.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Дмитрий Безматерных |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/tag
- Repository: https://github.com/cloud-ru-tech/snack-uikit
- Homepage: https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/tag
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/tag

## Dependencies (6)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [@snack-uikit/icons](https://npm.io/package/@snack-uikit/icons.md) ^1.0.1
- [@snack-uikit/utils](https://npm.io/package/@snack-uikit/utils.md) ^5.0.0
- [@snack-uikit/scroll](https://npm.io/package/@snack-uikit/scroll.md) ^1.0.1
- [@snack-uikit/tooltip](https://npm.io/package/@snack-uikit/tooltip.md) ^1.0.1
- [@snack-uikit/dropdown](https://npm.io/package/@snack-uikit/dropdown.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2026-09-21
- 0.15.24-preview-78f2f029.0 (preview) — 2026-10-06
- 1.0.1-preview-acb79d0b.0 — 2026-09-21
- 1.0.1-preview-b2e4ed46.0 — 2026-09-21
- 1.0.1-preview-27969f64.0 — 2026-09-21
- 1.0.1-preview-fe85442f.0 — 2026-09-18
- 0.15.24-preview-fc6b5b87.0 — 2026-08-20
- 0.15.23 — 2026-08-07
- 0.15.23-preview-4e8bfebd.0 — 2026-08-07
- 0.15.23-preview-eff3bc02.0 — 2026-08-03
- 0.15.22 — 2026-07-03
- 0.15.22-preview-74429015.0 — 2026-07-03
- 0.15.22-preview-02d918ac.0 — 2026-07-03
- 0.15.22-preview-6a625dbd.0 — 2026-06-30
- 0.15.21 — 2026-06-24
- … 190 more at https://npm.io/package/@snack-uikit/tag/versions

## README

# Tag

## Installation
`npm i @snack-uikit/tag`

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/tag` предоставляет компоненты для отображения тегов — компактных меток с текстом, которые используются для категоризации, фильтрации и маркировки контента.
- Компоненты поддерживают различные визуальные варианты (appearance) и размеры, могут работать как обычные теги или ссылки, поддерживают удаление и отображение тултипов.
- Пакет включает два основных компонента: `Tag` для одиночных тегов и `TagRow` для отображения коллекций тегов с возможностью ограничения количества видимых элементов.

## Tag

### Description

- `Tag` — компонент для отображения одиночного тега с текстовой меткой.
- Поддерживает **два размера** (`xs`, `s`) и **девять вариантов внешнего вида** (neutral, primary, red, orange, yellow, green, blue, violet, pink) для визуального выделения и категоризации.
- Может работать в **трёх режимах**: обычный тег, тег с возможностью удаления (при передаче `onDelete`) и тег-ссылка (при передаче `href`).
- Поддерживает **тултип** (`tooltip`) для отображения дополнительной информации при наведении.
- В режиме ссылки позволяет задать обработчик клика (`onClick`) и атрибут `target` для управления поведением навигации.
- Figma: [`Tag`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A24551&mode=design).

### Example

```tsx
import { Tag } from '@snack-uikit/tag';

function Example() {
  return (
    <>
      <Tag
        label="Обычный тег"
        size="xs"
        appearance="primary"
      />
      
      <Tag
        label="Удаляемый тег"
        size="s"
        appearance="green"
        onDelete={() => console.log('Tag deleted')}
      />
      
      <Tag
        label="Тег-ссылка"
        size="xs"
        appearance="blue"
        href="https://example.com"
        target="_blank"
        tooltip={{
          tip: 'Перейти на страницу',
          placement: 'bottom',
        }}
      />
    </>
  );
}
```

## TagRow

### Description

- `TagRow` — компонент для отображения коллекции тегов в виде строки или нескольких строк с автоматическим переносом.
- Позволяет **ограничить количество видимых строк** через проп `rowLimit`: при превышении лимита оставшиеся теги скрываются под кнопкой "More" с указанием количества скрытых элементов.
- При наведении на кнопку "More" отображается выпадающий список со всеми скрытыми тегами.
- Поддерживает **удаление тегов** через коллбэк `onItemRemove`, который вызывается при клике на кнопку удаления любого тега в коллекции.
- Каждый тег в коллекции может иметь свой внешний вид (`appearance`), размер задаётся единообразно для всех тегов через проп `size`.
- Позволяет настроить текст кнопки "More" через проп `moreButtonLabel`.
- Если `rowLimit` не задан или равен `0`, отображаются все теги без ограничений.
- Figma: [`TagRow`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A24551&mode=design).

### Example

```tsx
import { TagRow } from '@snack-uikit/tag';

function Example() {
  const tags = [
    { label: 'Тег 1', appearance: 'primary' },
    { label: 'Тег 2', appearance: 'green' },
    { label: 'Тег 3', appearance: 'red' },
    { label: 'Тег 4', appearance: 'blue' },
    { label: 'Тег 5', appearance: 'violet' },
  ];

  return (
    <TagRow
      items={tags}
      size="xs"
      rowLimit={2}
      moreButtonLabel="Ещё: "
      onItemRemove={(label) => console.log(`Removed: ${label}`)}
    />
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## isTagLinkProps
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| href* | `string` | - |  |
| label* | `string` | - | Текст |
| onDelete | `MouseEventHandler<HTMLButtonElement>` | - | Коллбэк на удаление |
| size | enum Size: `"xs"`, `"s"` | - | Размер |
| appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Внешний вид |
| className | `string` | - | CSS-класс |
| tabIndex | `number` | - | tabIndex кнопки удаления |
| onClick | `(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | - |  |
| target | `string` | - |  |
| tooltip | `TooltipProps` | - | Тултип над тегом |
## Tag
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| href* | `string` | - |  |
| label* | `string` | - | Текст |
| onDelete | `MouseEventHandler<HTMLButtonElement>` | - | Коллбэк на удаление |
| size | enum Size: `"xs"`, `"s"` | - | Размер |
| appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Внешний вид |
| className | `string` | - | CSS-класс |
| tabIndex | `number` | - | tabIndex кнопки удаления |
| onClick | `(e: MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | - |  |
| target | `string` | - |  |
| tooltip | `TooltipProps` | - | Тултип над тегом |
## TagRow
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| items* | `TagRowItem[]` | - | Массив тэгов |
| rowLimit | `number` | - | Лимит количества рядов тэгов. При достижении лимита тэги скрываются под кнопкой. Отсутствие лимита или значение равное нулю отобразит весь список |
| size | enum Size: `"xs"`, `"s"` | - | Размер |
| moreButtonLabel | `string` | - | Текст кнопки, при наведении на которую отображается список скрытых тэгов |
| className | `string` | - | CSS-класс |
| onItemRemove | `(item: string) => void` | - | Коллбэк на клик по удалению тэга |


[//]: DOCUMENTATION_SECTION_END

---
_Source: https://npm.io/package/@snack-uikit/tag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._